jQuery code to change position of element on scroll

问题

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

<div class="post" id="post-<?php the_ID(); ?>">

            <div class="title">
                <h1><?php the_title(); ?></h1>
            </div>

            <div class="sharelinks">
                <ul>
                    <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">Tweet</a></li>
                    <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div></li>
                    <li><g:plusone size="medium" href="<?php the_permalink(); ?>/"></g:plusone></li>
                    <li><a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo urlencode(sofa_image_src('full')); ?>&description=<?php echo urlencode(get_the_title($post->ID)); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li>
                    <li><su:badge layout="1"></su:badge></li>
                </ul>
            </div>
</div>

That is my html. and my css for the "sharelinks" is:

.sharelinks {
    padding: 10px 20px;
    background: #f1f1f1;
    box-shadow: 0 1px #fff inset, 0 -1px #fff inset;
    border-bottom: 1px solid #ddd;
    position: relative;
}

What I want to achieve? - I want to change the position of the sharelinks div when user scrolls beyond its scope and place it always on TOP of page (fixed position) then make it return to its default position when user scrolls back up to its place. The idea is how to make the bar appears in its position as long as the user does not scroll "beyond" it if he scroll , it appears fixed on top of page.

I have a similar code which works perfectly for HEADER but the same code does not work for this element,i think because my header is at the very top of the page.

I really need any help or ideas how to make that effect I am after.

// fixed navigation
var yOffset = $("#header").offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > yOffset) {
        $("#header").css({
            'top': 0,
            'position': 'fixed'
        });
    } else {
        $("#header").css({
            'top': yOffset + 'px',
            'position': 'absolute'
        });
    }
});

回答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'
        });
    }
});

回答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

来源：https://stackoverflow.com/questions/11003234/jquery-code-to-change-position-of-element-on-scroll

标签

jquery

css

position