Question

所以我的网站上有一个页面，当用户滚动到某一点时，该页面上会有一些导航元素贴在页面上。其中有三个，一个在顶部，一个在左边，一个在右边。 HTML和CSS如下：

<div id="nav" class="nav">
    <!--STUFF CONTAINED IN TOP NAV BAR-->
</div>

<div class="right" id="right">
    <!--STUFF CONTAINED IN RIGHT NAV-->         
</div>

<div class="left" id="left">
    <!--STUFF CONTAINED IN LEFT NAV BAR-->
</div>


.nav {
    position: absolute;
    top: 108px;
    height: 45px;
    width: 100%;
    left: 0;
    right: 0;
}

.nav_sticky {
    position: fixed;
    top: 0;
    height: 45px;
    left: 0;
    right: 0;
    background-image: url(images/backgrounds/stardust_@2X.png);
    z-index: 10;
}

.right {
    width: 200px;
    height: 900px;
    position: absolute;
    right: 50%;
    margin-right: -538px;
    top: 153px;
}

.right_sticky {
    width: 200px;
    height: 900px;
    position: fixed;
    right: 50%;
    margin-right: -538px;
    top: 45px;
}

.left {
    width: 200px;
    height: 900px;
    position: absolute;
    left: 50%;
    margin-left: -538px;
    top: 153px;
}

.left_stick {
    width: 200px;
    height: 900px;
    position: fixed;
    left: 50%;
    margin-left: -538px;
    top: 45px;
}

然后我使用跟随JQuery来使这些元素坚持下去。

 <script>
        $(document).ready(function(){
            var navPos = $('#nav').offset().top;
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                if (scrollTop >= navPos) {
                    var classNamee = $('#nav').attr('class');
                    console.log(classNamee);
                    if (classNamee === "nav") {
                        $("#nav").toggleClass('nav nav_sticky');
                        $("#right").toggleClass('right right_sticky');
                        $("#left").toggleClass('left left_stick');
                    }
                }

                if (scrollTop <= navPos) {
                    var className = $('#nav').attr('class');
                    console.log(className);
                    if (className === "nav_sticky") {
                        $("#nav").toggleClass('nav_sticky nav');
                        $("#right").toggleClass('right_sticky right');
                        $("#left").toggleClass('left left_stick');
                    }
                }
            });
        });
    </script>

这是我的问题。这适用于顶部和右侧导航，但无论我尝试什么，左侧导航器在其他导航器停止时继续滚动。我认为它可能是css类中的一个拼写错误，但是当我查看检查器时，.toggleClass函数甚至不会更改#left元素上的类，而当它在另外两个元素上执行时。关于可能导致这种情况的任何想法？

Answer 1

如果我将您的示例代码原样复制/粘贴到jsFiddle并运行它，当您向下滚动足够远时，它会正确地将所有内容切换到*_sticky个类，但有关负面margin-right的内容right类元素在.right和.right-stick之间翻转时，似乎会将滚动重置为顶部（至少在Chrome中）。滚动重置后，它还会重新运行您的事件处理程序并更改所有类。

尝试从CSS中删除这些行，看看行为是否正常（在jsFiddle中的Chrome中）

.right {
    ...
    /*margin-right: -538px;*/

.right-stick {
    ...
    /*margin-right: -538px;*/

.toggleClass不会切换某个类，但正在处理所有其他类

1 个答案: