如何使浮动菜单保持原状，直到你滚动它

我想制作一个固定的菜单。但是我希望只有在我滚过它时才能修复它。其实我想它就像问题的“如何..”菜单问的问题部分的计算器。 https://stackoverflow.com/questions/ask 如何使浮动菜单保持原状，直到你滚动它

我以为你需要jquery来做这样的事情，但我真的不太了解jquery。

我使用此代码的菜单，我想浮动。所以整个侧边栏DIV需要浮动：

<div id="sidebar"> 
    <div> 
     <h2 class="title">Sites</h2> 
      <ul> 
       <li><a>first li</a></li> 
       <li><a>second li</a></li> 
       <li><a>third li</a></li> 
     </ul> 
    </div> 
    <div> 
     <h2 class="title">Sites</h2> 
      <ul> 
       <li><a>first li</a></li> 
       <li><a>second li</a></li> 
       <li><a>third li</a></li> 
      </ul> 
    </div> 
</div>

我知道我可以让它浮动到页面的顶部，但我想它漂浮在一个包装。

我希望你们能帮助我。

编辑

现在我有这个代码的浮动菜单：

<script type="text/javascript"> 
    $(function() { 
     var offset = $("#sidebar").offset(); 
     var topPadding = 15; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > offset.top) { 
       $("#sidebar").stop().animate({ 
        marginTop: $(window).scrollTop() - offset.top + topPadding 
       }); 
      } else { 
       $("#sidebar").stop().animate({ 
        marginTop: 0 
       }); 
      }; 
     }); 
    }); 
</script>

但是，当我向下滚动一个非常恼人的反弹效果。有没有办法消除这种影响？

来源

2013-10-15 Moreno__R

简而言之：你会绑定到scroll事件窗口，并检查当前scrollTop（像素间距从页面到像素的目前视口的顶端上的）是否大于从页面顶部到侧边栏顶部的距离。
如果这是给出的，您将设置差异为marginTop，以使侧栏停留在可见区域。

请参阅http://css-tricks.com/scrollfollow-sidebar/以获取示例和更多信息。

来源

2013-10-15 19:34:24 Capricorn

一个小问题，当你向下滚动时，我可以摆脱反弹的东西吗？或者是他只是必须加载页面，因为它有弹跳。因为我希望它更像是什么时候它会被修复。 –

为了避免动画替换'$ sidebar.stop（）。animate（{'在上面链接的示例代码中用'$ sidebar.css（{'为了不动画margin-top的变化，但是立刻设置它。这有助于我不确定“弹跳”的含义。 – Capricorn

如何使浮动菜单保持原状，直到你滚动它

回答

相关问题