Home › Forums › JavaScript › Fix each div to top on scroll
- This topic is empty.
-
AuthorPosts
-
January 31, 2014 at 3:41 pm #161570roboshowParticipant
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.
February 7, 2014 at 10:38 am #162178shaneismeParticipantIf 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.
February 8, 2014 at 12:32 pm #162249dyrParticipantAlso 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.
February 8, 2014 at 2:05 pm #162253dyrParticipanthttp://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 toposition: absolute
withtop:
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
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.