It is pretty simple to make some element sticky after scrolling several pixels. However, how would you do an opposite of that?
I want an element to be sticky, but after scrolling e.g. 400px (to its original position) it would remain there.
A very good example can be found here http://ultrahd-3d-televize.heureka.cz
You can achieve this by changing position to fixed
and absolute
via jquery,
use fixed
when you want sticky to move along and absolute
when it should stop moving. you should also set top
of sticky to make it stop at the right place:
var num = 400; //after num pixels, sticky doesn't move any more
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
var top = $(window).height() + num;
$('.menu').css({"position":"absolute","bottom":"auto","top":top + "px"});
} else {
$('.menu').css({"position":"fixed","bottom":"0","top":"auto"})
}
});
This Fiddle shows how to make it happen.