Question

我有一个固定定位的Div应该停止滚动/变得不固定，所以不要越过页脚DIV。所以这不是使用z-index将页脚放在固定DIV上的问题。固定的div应该停在页脚之上。 {{3}}

#fixedDiv{
  position:fixed;
  width:100px;
  height:175px;
  margin-top:30px;
  background-color:#DB1926;
  color:white;
  padding:10px;
  display: inline-block;
  vertical-align:top;
}

任何人都可以帮助或让我朝着正确的方向前进。感谢。

Answer 1

希望这有帮助。

<强>样本

＆＃13;

$(document).scroll(function() {
  var $self = $("#fixedDiv");
  $self.css('margin-top', 0);
  var fixedDivOffset = $self.offset().top + $self.outerHeight(true);
  // if reaches footer
  if (fixedDivOffset > ($("#footer").offset().top - 30)) {
    $self.css('margin-top', -(fixedDivOffset - $("#footer").offset().top));
  } else {
    $self.css('margin-top', '30px');
  }
});

＆＃13;

#container {
  width: 600px;
}

#text {
  width: 200px;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
}

#fixedDiv {
  position: fixed;
  width: 100px;
  height: 175px;
  margin-top: 30px;
  background-color: #DB1926;
  color: white;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
}

#footer {
  width: 90%;
  height: 700px;
  margin-top: 20px;
  background-color: #451870;
  color: white;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque elit elit, ac aliquet augue congue id. Suspendisse hendrerit lorem quis ante fringilla, nec consequat nulla egestas. Praesent lobortis felis ut ex congue, at lobortis justo blandit.
    Praesent convallis metus et finibus venenatis. Phasellus et sapien at augue porta venenatis. Phasellus justo turpis, tempus ut eros sit amet, tristique iaculis lectus. Curabitur facilisis dolor nibh, rutrum accumsan lacus suscipit et. Nulla ut ornare
    ante, eu pellentesque odio. Pellentesque non facilisis felis. Sed congue arcu at turpis finibus, non facilisis sapien pretium. Nulla finibus cursus hendrerit. Cras nec neque at ipsum lobortis accumsan id at sem. Donec dignissim, velit id interdum
    ornare, magna augue suscipit risus, ut iaculis eros urna ut orci.</div>

  <div id="fixedDiv">fixedDiv</div>
</div>

<div id="footer">Footer. The fixedDIv should not scroll over this Footer.</div>

＆＃13;

Answer 2

我尝试使用vanilla JS（在Chrome和Firefox上测试）

JsFiddle demo

请注意，此实现只是一个概念验证，应该进行调整，以便在不同的旧浏览器上正常工作。我尝试通过去抖scroll事件来提高性能（requestAnimationFrame在用户滚动时执行检查）

当固定的div到达页脚时，一个类被切换，元素转动，以便通过CSS设置position: absolute（我对页脚的样式也进行了一些小的调整）

Javascript

(function(div, footer) {

   var idleScrolling = true,
       scrollTop     = 0,
       intvScrolling;


   var fr = footer.getBoundingClientRect();
   var dr = div.getBoundingClientRect();


   var checkFixedDivPosition = function() {
       var bottomEdge;

       if (!idleScrolling) {
           /* user is scrolling, get the scrollTop position */
           scrollTop = document.documentElement.scrollTop || 
                       document.body.scrollTop;

           bottomEdge = dr.top + dr.height + scrollTop;
           div.classList.toggle('absolute', bottomEdge >= fr.top);


           /* set timeout to detect the end of the scroll 
              and to avoid useless computation */
           intvScrolling = setTimeout(function() {
               idleScrolling = true;
           }, 250);

           window.requestAnimationFrame(checkFixedDivPosition);
       }
   };


   window.addEventListener('scroll', function() {

       /* clear timeout */
       clearInterval(intvScrolling);
       intvScrolling = null;

       /* if the user starts to scroll then check elements */
       if (idleScrolling) {
           idleScrolling = false;
           checkFixedDivPosition();
       }

       idleScrolling = false;

   });

}(
   document.getElementById("fixedDiv"), 
   document.getElementById("footer")
));

时间轴快照（滚动时）

Vanilla-JS （去抖）方法：

FPS通常很高（绿步功能）绘画和渲染事件很少。 javascript区域（黄色）也相当小。 FPS上方的红色块是长（垃圾）帧

jQuery 方法（用于比较）

Answer 3

只需将position: fixed;更改为position: absolute;即可。这将根据您的父容器将您的内容设置为绝对位置。 Here's一个经过编辑的小提琴，只有一行改变了。

将固定div保留在其容器中

3 个答案: