固定位置，直到页脚之前

debugcn 发表于 Dev

迈克尔·塞缪尔（Michael Samuel）

我有以下代码：

<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忽略if条件重叠。
切换到后，position:absolute无法确定向上滚动时如何再次修复#side，#footer即使再次向上滚动，也将永久停留在该位置。

我创建了一个小提琴供您测试：http : //jsfiddle.net/JuD5h/

昌兰树

这是您更新的小提琴：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会使动画闪烁，但我希望您可以使用少量延迟来解决此问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。