jQuery代码可更改元素在滚动条上的位置 [英] 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>

那是我的html.而我的"sharelinks"的css是:

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;
}

我想实现什么?-我想在用户滚动到其范围之外时更改共享链接div的位置，并将其始终放置在页面的顶部(固定位置)，然后在用户滚动回到其位置时使其返回默认位置.这个想法是，只要用户不滚动，就不会使滚动条显示在其位置上，而是固定在页面顶部.

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.

我有一个类似的代码非常适合HEADER，但是对于我这个元素来说，相同的代码不起作用，我想因为我的标题位于页面的顶部.

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

推荐答案

这是固定的解决方案.:)

Here is the fixed solution. :)

从获取滚动位置开始，然后在滚动通过特定值(顶部到元素开始之间的距离)时将元素的CSS更改为固定，否则恢复元素的默认CSS.

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

这篇关于jQuery代码可更改元素在滚动条上的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！