How can I make a div stick to the top of the screen once it's been scrolled to?

html

responsive-design

sticky

javascript

byAlex Kataev·Oct 12, 2024

To swiftly resolve, employ CSS position: sticky. This attaches your div to the top after you've scrolled to it. Apply top: 0; to glue it to the upper edge of the viewport.

.sticky {
  position: sticky;
  top: 0;
}

Ascribe the class sticky to your div:

<div class="sticky">Content that sticks around</div>

Cross-browser compatibility: The Bermuda Triangle of coding

Not every browser is a good listener, particularly old-timers like IE and Edge. They play hard to get with position: sticky. Here is when JavaScript and polyfills such as Stickyfill can be a programmer's best friend.

// Am I in the 90s? Is `position: sticky` supported?
if (!CSS.supports('position', 'sticky')) {
  // Oh well, let’s call our friend Stickyfill for help
  var stickyElements = document.querySelectorAll('.sticky');
  Stickyfill.add(stickyElements);
}

Responsiveness: Adapting like chameleons

For responsive designs, position: sticky can sometimes be as stubborn as a mule. This is when Media queries step in to negotiate.

.sticky {
  position: sticky;
  top: 0;
}

@media (max-width: 600px) {
  .sticky {
    top: 10px; // Got shorter for mobile views, it seems
  }
}

Dynamic positioning: Like changing seats in musical chairs

There are times when we need to play musical chairs with our div's positioning—switching between position: absolute and fixed based on the scroll status. Time to invite JavaScript's scroll event on stage!

window.onscroll = function() {
  var header = document.getElementById('myHeader');
  var stickyOffset = header.offsetTop;

  if (window.pageYOffset > stickyOffset) {
    header.classList.add('sticky'); // Like a sticky note now!
  } else {
    header.classList.remove('sticky'); // Fell off, like a weak post-it note
  }
};

Super-charged behavior with jQuery

Are you a jQuery fan? Want to handle your scroll behavior like slicing through butter? Say no more.

$(window).scroll(function() {
  var header = $('#myHeader');
  var stickyOffset = header.offset().top;

  if ($(window).scrollTop() > stickyOffset) {
    header.addClass('sticky'); // It's morphin' time!
  } else {
    header.removeClass('sticky'); // Back to normal. Morph finished
  }
});

If you crave for a beefed-up jQuery solution, plugins like Sticky-Kit can serve that on a silver platter.

Overcoming potential hurdles

Loss of visibility with z-index

When there are overlapping elements, it's a wrestling match. Declare your champion div with the power of z-index.

.sticky {
  z-index: 1000; // Because being on top of others feels good
}

Struggles of being short: Offsetting woes

Got a tall header or other UI elements bullying your sticky div? No worries! There's room for everyone. Adjust the top property to give it some personal space.