如何使 div 元素固定直到它到达其他 div

Question

我为自己创建了一个站点，我希望我的上边框与浏览器 window 一起出现，直到它遇到下边框。

这是代码

 .upperBorder { width: 100%; height: 40%; background-color: #EEECF5; -ms-transform: skewY(-5deg); /* IE 9 */ -webkit-transform: skewY(-5deg); /* Safari 3-8 */ transform: skewY(-5deg); box-shadow: 0 0 5px #333; }.lowerBorder { margin-top: 500px; width: 100%; height: 40%; background-color: #EEECF5; -ms-transform: skewY(-5deg); /* IE 9 */ -webkit-transform: skewY(-5deg); /* Safari 3-8 */ transform: skewY(-5deg); box-shadow: 0 0 5px #333; } div { display: block; }

 <div style="display:inline;" id="menu"> <div class="img-container" data-slideshow style="position: fixed;"> <img alt="img1" src="../Resources/Other/Pictures/1.jpg"> <img alt="img2" src="../Resources/Other/Pictures/2.jpg"> <img alt="img3" src="../Resources/Other/Pictures/3.jpg"> <img alt="img4" src="../Resources/Other/Pictures/4.jpg"> <img alt="img5" src="../Resources/Other/Pictures/5.jpg"> <img alt="img6" src="../Resources/Other/Pictures/6.jpg"> <img alt="img7" src="../Resources/Other/Pictures/7.jpg"> <img alt="img8" src="../Resources/Other/Pictures/8.jpg"> <img alt="img9" src="../Resources/Other/Pictures/9.jpg"> </div> <div style="position: relative;height: 100vh;top:-150px;"> <div class="upperBorder"></div> <div class="lowerBorder"></div> </div> <div class="logo"></div> <p class="Menu" style="left:50px;position: absolute;cursor: pointer;color: #EEECF5" onclick="">Home</p> <p class="Menu" style="left:15%;position: absolute;cursor: pointer;" onclick="">About Me</p> <p class="Menu" style="left:29%;position: absolute;cursor: pointer;" onclick="Projects()">Projects</p>

Answer 1

您可以通过比较偏移量来查看一个元素是否传递了另一个元素。 请参见下面的示例。

 $(window).on('scroll', function(){ var $fixedDiv = $('#FixedDiv'); var $CollissionDiv = $('#ColissionDiv'); //Get offset values (taking into account the height of the fixed div) var fixedDivCollisionPoint = $fixedDiv.offset().top + $fixedDiv.height(); var ColossionDivOffset = $('#ColissionDiv').offset().top; //When collsion is detected set it div positioning to static if(fixedDivCollisionPoint > ColossionDivOffset) { $fixedDiv.css('position', 'static'); } });

 #FixedDiv { position: fixed; top: 100px; border: 1px solid black; } #ColissionDiv { border: 1px solid red; }.NoColissionDiv { border: 1px solid green; height: 1000px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class=NoColissionDiv>No Collision Div</div> <div id=FixedDiv>Fixed Div</div> <div id=ColissionDiv>Collision Div</div> <div class=NoColissionDiv>No Collision Div</div>