Jquery 停止页面底部的侧边栏_Jquery

Jquery 停止页面底部的侧边栏

jquery

Jquery 停止页面底部的侧边栏,jquery,Jquery,我在一个页面上有一个侧边栏，每当用户滚动时，它就会上下滚动。除了在这一页的末尾之外，一切都很好。我想停止滚动栏一旦它在页面底部。我尝试在while循环中加入，但这会使我的页面崩溃，并使其在每次滚动时都没有响应。有人能告诉我哪里出了问题吗到目前为止，我掌握的代码是： $(window).scroll(function() { clearTimeout( $.data( this, "scrollCheck" ) ); $.data( this, "scrollCheck", setT

我在一个页面上有一个侧边栏，每当用户滚动时，它就会上下滚动。除了在这一页的末尾之外，一切都很好。我想停止滚动栏一旦它在页面底部。我尝试在

while

循环中加入

，但这会使我的页面崩溃，并使其在每次滚动时都没有响应。有人能告诉我哪里出了问题吗
到目前为止，我掌握的代码是：
  $(window).scroll(function() {
  clearTimeout( $.data( this, "scrollCheck" ) );
  $.data( this, "scrollCheck", setTimeout(function() {
      var nTop = $(window).scrollTop() + parseInt(el.attr('data-top'));
      var nBottom = nTop + $(window).height();
      console.log("Top => " + nTop);
      console.log("Bottom => "+ nBottom);
      while(nBottom < $(document).height()) {
          el.animate({
              top: nTop
          }, 500);
          if (nBottom == $(document).height()) {
              break;
          }
      }
  }, 250) );
});

下面是一个超级简单的例子，说明了我在评论中所说的。这涉及到使用css定位，以确保侧边栏始终可见。不需要javascript。如果在
中添加足够的文本以使页面需要滚动，则可以看到侧边栏始终可见，从而避免了复杂的javascript尝试使其向下移动页面的需要
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar
{
  position:fixed;
  top:0;
  left:0;
  width:10%;
}
#content
{
  margin-left:10%;
}
</style>
</head>
<body>
<div id="sidebar">
  <ul class="menu-list">
    <li class='menu-item active'><a href='index.html' >Home</a></li>
    <li class='menu-item'><a href='page1.html' >Page 1</a></li>
    <li class='menu-item'><a href='page2.html' >Page 2</a></li>
  </ul>
</div>
<div id="content">
  Put enough content here to require scrolling. You can auto-generate random text at http://www.lipsum.com
</div>
</body>
</html>


#边栏
{
位置：固定；
排名：0；
左：0；
宽度：10%；
}
#内容
{
左边距：10%；
}





在此处放置足够的内容以要求滚动。您可以随时自动生成随机文本http://www.lipsum.com
与其让侧边栏滚动，为什么不使用CSS为其指定“位置：固定”。只要您正确地安排了所有其他内容，当用户滚动页面的其余部分时，它就会保持不变。更简单。@ADyson一旦用户开始滚动页面，就要求滚动条滚动。如果您使用“位置固定”，它看起来就像在滚动，但您不必编写任何JS。如果侧边栏对于页面的高度来说太大，那么也可以在侧边栏上设置溢出：滚动，然后用户可以在侧边栏内单独滚动。我想这里的目标是确保侧边栏始终可见？@ADyson是的，我需要确保侧边栏始终可见。@ADyson我尝试过你的建议，但侧边栏在页面底部时仍会滚动
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar
{
  position:fixed;
  top:0;
  left:0;
  width:10%;
}
#content
{
  margin-left:10%;
}
</style>
</head>
<body>
<div id="sidebar">
  <ul class="menu-list">
    <li class='menu-item active'><a href='index.html' >Home</a></li>
    <li class='menu-item'><a href='page1.html' >Page 1</a></li>
    <li class='menu-item'><a href='page2.html' >Page 2</a></li>
  </ul>
</div>
<div id="content">
  Put enough content here to require scrolling. You can auto-generate random text at http://www.lipsum.com
</div>
</body>
</html>