Inverse sticky after scroll element css jqeury

Question

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

Answer 1

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.

Inverse sticky after scroll element css jqeury

Sign up