Div element won't stick

Div element won't stick
0.0 0

#1

Hi everyone. So this is my code. The problem is the div element won’t stick on top of the page. What do you think is the problem? (Code taken from w3schools.com. Works on their Try it editor but not on my PC)

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

#2

The code is working fine, you just have to check if sticky supports your browser.

https://jsfiddle.net/Randore/tm5ydzw6/


#3

Where’s that? I’m using torch browser. I just checked it on Chrome and it works fine. But it doesn’t work on torch, edge and IE. All my browsers are updated constantly.


#4

Read more
https://caniuse.com/#search=sticky


#5

Yeah I found the problem. It’s not supported on all of my browsers, cause I didn’t update them as regularly as I thought I had. So, just Chrome. Thanks for the replies! :raised_hands::raised_hands: