jQuery code to change position of element on scroll

Question

I have a bar which includes sharing and social icons. The bar is positioned below post title now like this:

        
                      

              相关标签:
       
      

Answer 1

Here is the fixed solution. :)

It starts with getting scroll position then change the CSS of element to fixed when scrolling passes specific value (the distance between top to element start) else revert default css for element.

var sOffset = $(".sharelinks").offset().top;
var shareheight = $(".sharelinks").height() + 43;
$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > sOffset - shareheight) {
        $(".sharelinks").css({
            'top': '61px',
            'position': 'fixed'
        });
    } else {
        $(".sharelinks").css({
            'top': 'auto',
            'position': 'relative'
        });
    }
});

Answer 2

use position:sticky to make it.

Here is the article explained.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

and old way of doing this demo

with sticky position demo