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

所以我在我的网站上有一个页面，当用户滚动过某个点时，页面上会粘上一些导航元素。有三个，一个在上面，一个在左边，一个在右边。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;
}

.导航{
位置：绝对位置；
顶部：108px；
高度：45px；
宽度：100%；
左：0；
右：0；
}
.nav_粘滞{
位置：固定；
排名：0；
高度：45px；
左：0；
右：0；
背景图片：url（images/backgrounds/stardust@2X.png）；
z指数：10；
}
.对{
宽度：200px；
高度：900px；
位置：绝对位置；
右：50%；
右边距：-538px；
顶部：153px；
}
.好的{
宽度：200px；
高度：900px；
位置：固定；
右：50%；
右边距：-538px；
顶部：45px；
}
.左{
宽度：200px；
高度：900px；
位置：绝对位置；
左：50%；
左边距：-538px；
顶部：153px；
}
.左!{
宽度：200px；
高度：900px；
位置：固定；
左：50%；
左边距：-538px；
顶部：45px；
}

然后我使用followjQuery使这些元素保持不变

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

$（文档）.ready（函数（）{
var navPos=$（'#nav'）.offset（）.top；
$（窗口）。滚动（函数（）{
var scrollTop=$（this.scrollTop（）；
如果（滚动顶部>=导航位置）{
var classNamee=$（'#nav'）.attr（'class'）；
console.log（classNamee）；
如果（类别名称==“导航”）{
$（“#nav”）.toggleClass（'nav nav#u'）；
$（“#右”）.toggleClass（'right-right#u-sticky'）；
$（“#左”）.toggleClass（'left-left#stick'）；
}
}
如果（scrollTop如果我按原样复制/粘贴您的示例代码到jsFiddle并运行它，当您向下滚动足够远时，它确实会正确地将所有内容切换到
*\u sticky
类，但是
right
类元素上的负
边距似乎会将滚动重置到顶部（至少在Chrome中是这样）当它在
.right
和
.right stick
之间翻转时。当滚动被重置时，它还会重新运行事件处理程序并将所有类更改回原来的状态

尝试从CSS中删除这些行，看看行为是否正确（在JSFIDLE的Chrome中确实如此）

您在此处获得的id为“left”
$（“#left”）。toggleClass（'left-left_-stick'）；
但您的id为“leftt”
在你的htmlWhoops中，这是一个复制和粘贴的错误，它们在实际代码中是相同的。然后你可以忽略我的答案，检查@bwegs的答案是否有效。我添加了一些颜色只是为了测试类，让我知道这是否是你想要的。对不起，如果我不清楚，正确的答案有问题奇怪的是，它们基本上有相同的css，只是左右切换，所以没有理由一个工作，另一个不工作。
.right {
    ...
    /*margin-right: -538px;*/

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