Fix each div to top on scroll

[roboshow]

I’ve seen a few posts about sticky items on scroll, but nothing really fits what I’m trying to do. I know I can’t do it with CSS alone, so I’m posting here to get some jQuery help.

Here is my CodePen: http://cdpn.io/cuGBm

What I would like is (while scrolling) for div #one to stick at the top as #two slides over it and sticks at the top as #three slides over that.

Thank you in advance for your help.

[shaneisme]

If you get it working for one, you should be able to apply that jQuery to each member of that class. If you also add a specific ID to each div as you go down the page and give it a position + a z-index that gets larger, you should get the effect you need.

There are a ton of tutorials out there, but I’ve always used this (where var top is where you want things to stick, it can be an element or pixel height, etc.):

$(function () {  
  var top = $('#ID').offset().top - parseFloat($('#ID').css('margin-top').replace(/auto/, 0)); // math is there in case the element has margin-top and removes it
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();    
    // whether that's below the form
    if (y >= top) {
      // if so, add the fixed class
      $('#menu').addClass('fixed');
    } else {
      // otherwise remove it
      $('#menu').removeClass('fixed');
    }
  });
});

Of course, you could swap out the IDs and replace them with classes so that it will work for each div.

[dyr]

Also just a note: there’s no reason to put:

$(document.ready(function(){
  (function(){
    // stuff
  })
})

You only need one or the other (either the document.ready closure or the anonymous self-executing function) to ensure code execution after dom readiness.

[dyr]

http://codepen.io/shawkdsn/pen/Blteg (mixed js/jQuery)
http://codepen.io/shawkdsn/pen/ncBzf (mostly jQuery)

Ugly as hell but it works and it looks okay. You are likely to need to customize this a lot further based on the structure of your markup and what else lives on the page. Basically the tricky part is that whichever items you’re affixing to the top edge of the screen are removed from the document flow while they are position: fixed which can cause containing elements to shrink in height and also causes any other elements that follow the fixed element to reflow in the page.

To get around this I’ve made it so the container (in this case the body) has it’s height set after the page loads to whatever height it is. Then for each of the .page divs we get the offsetTop, change it to position: absolute with top: equal to offsetTop (so it stays positioned on the page where it was when the page loaded, and so that .page divs down the page don’t smush together when one becomes sticky.)

The last bit is to compare the scroll position to each of the .page divs and either add or remove the fixed class based on whether the element is above or below the top edge of the screen.

Cheers

[Author]

Posts