Stick div to top on scroll and unstick later

Question

Currently when a div hits the top of the browser it becomes sticky (fixed) and that works perfect. What I would like is the div to unstick again after continue scrolling for another 500 pixels.

Is there a way to do this?

ps. I know the Stickem solution but that is a lot if Javascript, I have the feeling that this can be done much easier.

window.onscroll = function() {myFunction()}; var header = document.getElementById("center"); var sticky = header.offsetTop-10; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }

#top { height:200px; background:#BFBDC1; } #center { height:30px; background:#37323E; } #bottom { height:4000px; background:#6D6A75; } .sticky { position:fixed; top:0px; width:100%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="top"></div> <div id="center"></div> <div id="bottom"></div>

Anis R. · Accepted Answer · 2019-10-16 20:42:01Z

Simply adding an upper bound to your if condition should do the trick.

Instead of just checking if the current offset is greater than the lower bound (sticky in this case), also check if it is less than the desired upper bound (sticky + 500).

window.onscroll = function() {myFunction()}; var header = document.getElementById("center"); var sticky = header.offsetTop-10; function myFunction() { if (window.pageYOffset > sticky && window.pageYOffset < sticky + 500) { // <--here header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }

#top { height:200px; background:#BFBDC1; } #center { height:30px; background:#37323E; } #bottom { height:4000px; background:#6D6A75; } .sticky { position:fixed; top:0px; width:100%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="top"></div> <div id="center"></div> <div id="bottom"></div>

This is definitely on the right track, thanks but after 500px it now suddenly disappears, is it possible to scroll it out smoothly?
@ErwinvanEkeren If you are using jQuery, you can use jQuery's animate() function.

Ted Fitzpatrick · Accepted Answer · 2019-10-16 20:32:59Z

0

Add some additional conditional in your function testing against window.scrollY

answered Oct 16, 2019 at 20:32

Ted Fitzpatrick

9541 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

Stick div to top on scroll and unstick later

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related