Question

我有以下jQuery脚本，当它滚动到页面上的某个点时，它会向元素添加一个类。

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();                    
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } else {
                s.removeClass("stick"); 
            }
        });

这是HTML部分。

<div id="sticker">
    <div class="widget">
        <?php dynamic_sidebar( 'widget-area-2' ); ?>
    </div>                              
    <h3>Uw voordelen</h3>
        <ul class="ClassName">
            <li><strong style="vertical-align:top; margin-bottom:0px">Something A</strong>
                <div class="submenu">Some text A</div>
            </li>
            <li><strong style="vertical-align:top; margin-bottom:0px">Something B</strong>
                <div class="submenu">Some text B</div>
            </li>
            <li><strong style="vertical-align:top; margin-bottom:0px">Something C</strong>
                <div class="submenu">Some text C</div>
            </li>
        </ul>
</div>

现在发生的事情是，当添加类#sticker时，div .stick高于页脚元素。这会导致内容在页脚元素上滑动，这是我不想要的。

因此，当您向下滚动页面上的x像素时，我想到的是removeClass类上的stick。所以我尝试了以下代码：

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();                    
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } if (windowpos >= pos.top + 900) {
                s.removeClass("stick");
            } else {
                s.removeClass("stick"); 
            }
        });

但是没有去，然后我在这个页面上发现了一个类似的问题，但这并不是我想要的。但我把它添加到我的代码中，如下：

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();                    
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } else if (windowpos >= pos.top + 900) {
                s.removeClass("stick");
            } else {
                s.removeClass("stick"); 
            }
        });

这两个代码都没有按照我的要求去做。任何人都可以帮我正确的代码或指向正确的方向吗？感谢。

Answer 1

If条件的顺序错误。你应该使用：

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 900) {
            s.removeClass("stick");
        } else if (windowpos >= pos.top + 380) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

甚至更好：

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 380 && windowpos < pos.top + 900) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

Answer 2

您的代码中存在一些语法错误。

这是一个快速演示，显示它现在正在运行：

http://codepen.io/paulcredmond/pen/jrzdxJ?editors=1111

$(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();

    $(window).scroll(function() {
         var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top + 380) {
            s.addClass("stick");
        } else if (windowpos >= pos.top + 900) {
            s.removeClass("stick");
        } else {
            s.removeClass("stick");
        }    

    });
});

滚动浏览x-px（从底部）时删除类

2 个答案: