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

我会说那是＆＃34;更清洁＆＃34;因为你不需要第二个if语句，但看起来很好。

在某一点之后停止粘贴的粘性侧导航

1 个答案: