Question

我在页面上有一个侧边栏，只要用户滚动，它就会向上和向下滚动。除了在页面的末尾，一切都很好。我希望栏一旦位于页面底部就停止滚动。我已尝试放入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

#social-bar {
position: fixed;
top: 120px;
left: -50px;
width: 50px;
}

Answer 1

这是我在评论中谈论的一个非常简单的例子。这涉及使用css定位以确保侧栏始终保持可见。不需要JavaScript。如果您在<div id=content>中添加足够的文字以使页面需要滚动，您可以看到侧边栏始终可见，避免了复杂的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>

停止页面底部的侧边栏

1 个答案: