Javascript 粘性侧导航，在某一点后停止粘滞

我想知道如何使一个粘性侧导航停止滚动或停止粘贴并在某个点后锁定到位。相关项目页面位于此处：

---

如您所见，菜单左侧的导航小导航“粘住”到实际页面。但如果你一直向下滚动，它会继续粘住。我想知道是否有办法让它只与主菜单页面一起滚动？我想我现在已经用最基本的形式设置了它，使用固定的CSS标签。任何建议都很好！谢谢

这应该是你想要的。您将必须找到一个值，在该值之后将其隐藏

$(window).scroll( function() { 
    var valueOfScroll = $(document).scrollTop().valueOf();
    if(valueOfScroll <= ???)
       $('#sticker').show();
    else
       $('#sticker').hide();
});

根据您在评论中提出的问题：

$(window).scroll( function() { 
    var valueOfScroll = $(document).scrollTop().valueOf();
    if(valueOfScroll <= 10500)
       $('#sticker').css({ 'margin-left': "-135px" });
    else
       $('#sticker').css({ 'margin-left': "20px" });

    if(valueOfScroll <= 10800)
       $('#sticker').show();
    else
       $('#sticker').hide();
})

---

我想说这更干净，因为您不需要第二个if语句，但在我看来很好。

添加了淡入效果选项，所以它不会突然消失。谢谢！这就是总的想法！我使用您的代码添加了一些我自己的代码来添加转换。有没有更干净的方法来编写新代码和我的添加？我会看一看，让你看看know@RaufTür我更新了我的答案底部是我为你的问题添加答案的地方真的很感谢所有的帮助，伟大的洞察力，我可以诚实地说我学到了一些东西。再次感谢！

var top = true;
var bottom = false;

$(window).scroll( function() { 
    var valueOfScroll = $(document).scrollTop().valueOf();
    if(valueOfScroll <= 10500)
    {        
       if(!top)
       {
           bottom = false;
           top = true;
           $('#sticker').fadeToggle(1000);
       }
    }
    else
    {
      if(!bottom)
       {
           top = false;
           bottom = true; 
           $('#sticker').fadeToggle(1000);
       }     
    }
});

.side-tabs {
    margin-left: -135px;
    margin-top: 50px;
    position: fixed;
    z-index: 1 !important;
}

$(window).scroll( function() { 
    var valueOfScroll = $(document).scrollTop().valueOf();
    if(valueOfScroll <= 10500)
       $('#sticker').css({ 'margin-left': "-135px" });
    else
       $('#sticker').css({ 'margin-left': "20px" });

    if(valueOfScroll <= 10800)
       $('#sticker').show();
    else
       $('#sticker').hide();
})