javascript - 在某一点后停止粘附的粘性侧导航

Question

我想知道如何让粘性侧边导航停止滚动或停止粘着并在某一点后锁定到位。有问题的元素页面位于此处:

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

如您所见，菜单左侧带有导航的小导航“粘附”到实际页面。但如果你继续向下滚动，它会继续坚持下去。我想知道是否有办法让它只随主菜单页面滚动？我想我现在使用 Fixed CSS 标签以最基本的形式设置它。任何建议都会很棒!谢谢!

Answer 1

这应该做你想做的。您必须在之后找到一个您希望隐藏的值。

$(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 语句，但对我来说看起来不错。