将固定div保留在其容器中

Question

我有一个固定位置的Div，它应该停止滚动/变得不固定，以便不要越过页脚DIV。 因此，这不是使用z-index将页脚放在固定DIV上的问题。 固定div应该在页脚上方停止。 https://jsfiddle.net/euje2kqq/

#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

希望这可以帮助。

演示

 $(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'); } }); 

 #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; } 

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

Answer 2

我尝试使用普通JS（已在Chrome和Firefox上测试）

JsFiddle演示

请注意，此实现只是概念证明，应对其进行调整，以便在其他旧版浏览器上正常运行。 我试图通过消除scroll事件来提高性能（在用户滚动时requestAnimationFrame执行检查）

当固定的div到达页脚时，将切换一个类，并旋转元素，使position: absolute变为position: absolute通过CSS设置（我对页脚的样式也做了一些细微的调整）

---

Java脚本

(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; 。 根据您的父母的容器，这会将您的内容设置在绝对位置。 这是您的编辑小提琴，只改变了一行。