How to Create a Scrolling Div that Sticks to the Screen Top?

Creating a Scrolling Div that Sticks to the Screen Top

When you want an element to remain anchored at the top of the screen even as the page scrolls, you can create a "sticky" div. Here's how:

Using Pure CSS:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Alternate Method with jQuery:

Using jQuery, you can achieve the same effect with more flexibility. Position the element as follows:

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

Then, detect the scroll offset using JavaScript:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

Once the scroll offset exceeds a specified value (200px in this example), the div will become fixed at the top of the screen. When the scroll offset drops below that value, it will return to its initial position.

The above is the detailed content of How to Create a Scrolling Div that Sticks to the Screen Top?. For more information, please follow other related articles on the PHP Chinese website!