Question

当用户滚动时，如何将div的底部锚定到屏幕底部？例如，如果您在网站上有左侧导航，并且此导航在用户屏幕下方延伸大约200像素，则他们将无法看到所有导航。

当此用户开始滚动时，通常导航会正常滚动。如果页面足够长，则用户可以滚动所有导航。我的目标是保持左侧导航可见，并锚定在屏幕底部，无论用户滚动多远。

现在的位置是：固定的;不会单独解决这个问题，因为用户需要能够滚动到导航的底部，因为它比大多数标准显示器分辨率高。

Answer 1

查看本教程

http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/

这是一个单独的文件，显示了上面教程的实现。只需稍加调整即可实现您想要的效果。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function () {
   var msie6 = $.browser == 'msie' && $.browser.version < 7;
  if (!msie6) {
    var top = $('#box').offset().top;
    $(window).scroll(function (event) {
      var y = $(this).scrollTop();
      if (y >= top) { $('#box').addClass('fixed'); }
      else { $('#box').removeClass('fixed'); }
    });
  }
});

$(function () {

  // Check whether browser is IE6

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  // Only run the following code if browser
  // is not IE6. On IE6, the box will always
  // scroll.

  if (!msie6) {

    // Set the 'top' variable. The following
    // code calculates the initial position of
    // the box. 

    var top = $('#box').offset().top;

    // Next, we use jQuery's scroll function
    // to monitor the page as we scroll through.

    $(window).scroll(function (event) {

      // In the following line, we set 'y' to
      // be the amount of pixels scrolled
      // from the top.

      var y = $(this).scrollTop();

      // Have you scrolled beyond the
      // box? If so, we need to set the box
      // to fixed.

      if (y >= top) {

        // Set the box to the 'fixed' class.

        $('#box').addClass('fixed');

      } else {

        // Remove the 'fixed' class 

        $('#box').removeClass('fixed');
      }
    });
  }
});
</script>
<style type="text/css">
.main
{
margin-left:auto;
margin-right:auto;
height:2000px;
width:800px;
background-color:lightblue;
}
#box {
 background-color:green;
   position: absolute;
    top: 50px;
    left: 50%;
    width: 200px;
    margin-left: -500px;
height:500px;
}
#box.fixed {
    position: fixed;
}
</style>
</head>
<body>
<div id="box">
<p>Hello World</p>
</div>
<div class="main">
This is main page and here is scrollable content.
</div>
</body>
</html>

div底部到屏幕底部（不是页面）

1 个答案: