Question

我有以下代码：

<html>

<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<script>
$(window).on("scroll",function(e){

var sidepos = parseFloat($('#footer').offset().top - $('#side').outerHeight());

if($(window).scrollTop() > 100 && $('#side').offset().top < sidepos) {
   $('#side').css('position','fixed');
   $('#side').css('top','0');
}

else if($(window).scrollTop() > 100 && $('#side').offset().top >= sidepos) {
     $('#side').css('position','absolute');
     $('#side').css('top','' + sidepos + 'px');
}

else if($(window).scrollTop() < 100) {
  $('#side').css('position','');
  $('#side').css('top','');
}

}); 
</script>
</head>

<body>

<div id="header"></div>
<div id="body">
     <div id="side"></div>
</div>
<div id="footer"></div>

</body>
</html>

我希望在#side之前滚动#footer时保持#footer不变，以便它不与它重叠。

现在有两个问题：

如果您按下键盘上的“结束”按钮快速向下滚动，则该功能将无法执行，并且侧面与position:absolute重叠，忽略if条件。
切换到#side后无法弄清楚如何在向上滚动时再次修复，即使再次向上滚动，#footer也会永久地与{{1}}保持一致。

我为你测试了一个小提琴：http://jsfiddle.net/JuD5h/

Answer 1

以下是您更新的小提琴：http://jsfiddle.net/JuD5h/4/。

我对CSS进行了一些更改：

#body {
    height: 3000px;
    position: relative;
}
#side {
    width: 100px;
    height: 350px;
    float: left;
    border: 1px solid #000000;
    position: absolute;
    top: 0;
}

这是更新的Javascript：

$(function(){ // document ready
    var maxAbsoluteTop = $('#body').outerHeight() - $('#side').outerHeight();
    var minAbsoluteTop = 0;
    $(window).scroll(function(){
      var windowTop = $(window).scrollTop();
      var actualTop = windowTop - 100;
      if ( actualTop <= maxAbsoluteTop && actualTop >= minAbsoluteTop) {
          $('#side').css({ top: windowTop - 100 });
      } else if (actualTop > maxAbsoluteTop){
          $('#side').css({ top: maxAbsoluteTop });
      } else {
          $('#side').css({ top: minAbsoluteTop });
      }
    });
});

position: absolute的使用使得动画变得闪烁，但我希望你可以使用一点延迟来解决这个问题。

位置固定到页脚之前

1 个答案: