在特定点后停止粘贴的粘性侧导航

Sticky Side Nav that Stops Sticking after a Certain Point

本文关键字：导航      更新时间：2023-09-26

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

http://www.tcdiggity.com/new-diggity-menu-22/

正如你所看到的，带有菜单左侧导航的小导航"粘"在实际页面上。但如果你继续向下滚动，它会继续粘在上面。我想知道是否有办法让它只滚动主菜单页面？我想我现在已经使用FixedCSS标记以最基本的形式设置了它。任何建议都很好！谢谢

这应该是您想要的。你必须找到一个你想要隐藏的值。

$(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').show();
    else
       $('#sticker').hide();
});

这对渐变效果更好：

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

希望这能有所帮助！

另外，作为补充说明，我建议在CSS中添加margin-top:50px，这样侧栏就不会超过主要内容的纸张背景。：）

.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();
})

我会说这是"更干净"的，因为你不需要第二个if语句，但对我来说很好。

相关文章：