Javascript 位置固定到页脚之前_Javascript_Jquery_Html_Css

Javascript 位置固定到页脚之前

javascript jquery html css

Javascript 位置固定到页脚之前,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下代码： <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').out

我有以下代码：

<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>


$（窗口）。打开（“滚动”，功能（e）{
var sidepos=parseFloat（$（'#footer'）.offset（）.top-$（'#side'）.outerHeight（））；
如果（$（窗口）.scrollTop（）>100&&$（'#side'）.offset（）.top100&&$（'#side'）.offset（）.top>=sidepos）{
$（'side'）.css（'position'，'absolute'）；
$（'side'）.css（'top'，''+sidepos+'px'）；
}
else if（$（窗口）.scrollTop（）<100）{
$（'#side'）.css（'位置'，''）；
$（'side'）.css（'top'，''）；
}
});

我想在滚动到

#页脚

之前时保持

#侧

固定，这样它就不会与页脚重叠

现在有两个问题：

如果您像按下键盘上的“结束”按钮一样快速向下滚动，则该功能将不会执行，并且侧边与

#页脚重叠，忽略If条件


切换到位置后：向上滚动时，absolute
无法确定如何再次修复，即使再次向上滚动，#侧
也会永久粘在#页脚上

我创建了一个供您测试的小提琴：
这是您更新的小提琴：
我对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 });
      }
    });
});

$（函数（）{//文档准备就绪
var maxAbsoluteTop=$（'#body'）.outerHeight（）-$（'#side'）.outerHeight（）；
var minAbsoluteTop=0；
$（窗口）。滚动（函数（）{
var windowTop=$（window.scrollTop（）；
var actualTop=窗顶-100；
如果（实际上限=最小绝对上限）{
$（'#side'）.css（{top:windowTop-100}）；
}否则如果（实际顶部>最大绝对顶部）{
$（'#side'）.css（{top:maxAbsoluteTop}）；
}否则{
$（'#side'）.css（{top:minAbsoluteTop}）；
}
});
});

使用position:absolute
使动画闪烁，但我希望您可以通过稍微延迟来解决这一问题。
这是您更新的小提琴：
我对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 });
      }
    });
});

$（函数（）{//文档准备就绪
var maxAbsoluteTop=$（'#body'）.outerHeight（）-$（'#side'）.outerHeight（）；
var minAbsoluteTop=0；
$（窗口）。滚动（函数（）{
var windowTop=$（window.scrollTop（）；
var actualTop=窗顶-100；
如果（实际上限=最小绝对上限）{
$（'#side'）.css（{top:windowTop-100}）；
}否则如果（实际顶部>最大绝对顶部）{
$（'#side'）.css（{top:maxAbsoluteTop}）；
}否则{
$（'#side'）.css（{top:minAbsoluteTop}）；
}
});
});

使用position:absolute
会使动画闪烁，但我希望您可以通过稍微延迟来解决这一问题。
这是否是您需求的正确摘要：侧边栏应始终保持在屏幕上，且永远不会与页眉或页脚重叠？这是否是您需求的正确摘要：侧边栏应该始终保持在屏幕上，并且永远不要与页眉或页脚重叠？只是选中了…它与页脚重叠…您刚刚删除了防止重叠的部分啊，我有一个更大的屏幕，没有显示问题。我缩小了浏览器大小，现在可以看到问题了。@MichaelSamuel-我已经更新了代码，并在较小的浏览器上进行了检查。请看一看。在阅读您的答案之前，我已经能够通过检查窗口滚动顶部而不是侧偏移使其工作，如果元素是固定位置，则会返回不一致的值…如果感兴趣，您可以在此处查看谢谢您的努力：）刚刚检查…它与页脚重叠…您刚刚删除了防止重叠的部分啊，我有一个更大的屏幕，没有显示问题。我缩小了浏览器大小，现在可以看到问题了。@MichaelSamuel-我已经更新了代码，并在较小的浏览器上进行了检查。请看一看。就在阅读您的答案之前，我已经能够通过检查窗口滚动顶部而不是侧偏移使其工作，如果元素是固定位置，则会返回不一致的值…如果感兴趣，您可以在此处查看谢谢您的努力：）