How could I make my div move to the top of a page while scrolling as it does by default, but then once it reaches the top of the page, stay there? I have seen this done on other pages, and my guess is that it might not be able to be done with CSS alone, but might need jQuery and JavaScript as well. I would prefer using just CSS, but using jQuery and JavaScript is an option.
2 Answers
Check out this snippet below:
function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); } else { $('#sticky').removeClass('stick'); } } $(function () { $(window).scroll(sticky_relocate); sticky_relocate(); });#sticky { padding: 0.5ex; width: 600px; background-color: #333; color: #fff; font-size: 2em; border-radius: 0.5ex; } #sticky.stick { position: fixed; top: 0; z-index: 10000; border-radius: 0 0 0.5em 0.5em; } body { margin: 1em; } p { margin: 1em auto; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p>Made for my post: <a href="http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html">Stick div at top after scrolling</a>.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis gravida.</p> <div id="sticky-anchor"></div> <div id="sticky">This will stay at top of page</div> <p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> <p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> <p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, sit amet sodales risus leo quis nisi.</p> <p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> <p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> <p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, sit amet sodales risus leo quis nisi.</p> <p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> <p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p> <p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu, sit amet sodales risus leo quis nisi.</p>Tutorial: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
9 Comments
Choops
Very nice. Thank you!
Choops
Yup, just had to wait a few minutes before it allowed me to. When I implement your example, my page jumps a bit when hitting the div. I also noticed this in your example on jsfiddle, and I was wondering if there is any way to "fix" this.
Rahul Desai
@Choops are you talking about the black part at the top of the text that gets hidden when scrolled to the top?
Choops
No. When I scroll down and the top of my webpage hits the div, the webpage "jumps" down about 25-50 pixels. It might, however, just be Google Chrome. I'll try testing it in a different browser.
Rahul Desai
@Choops Yeah, it works perfectly if Firefox. Also, if you checkout the demo in the tutorial, that works perfectly in Chrome as well!
|
are you looking for this..
position:fixed;top:0px; 
2 Comments
Choops
No. This will keep my div in the same spot at all times, but I want my div to move upwards until it reaches the top of the page, and then the div will stay there.
annam priyatam
oh okk.. am sorry.. i thought u r asking for that... I don't know how to do it.. sorry..