只在某個地方制作帶有頁面的div滾動？

Question

怎樣才能使div與頁面一起滾動但只在頁面的某個區域滾動？

我不知道如何使用CSS只為頁面的一部分做這個，我認為javascript可能是唯一的選擇。

例如，頁面有三個部分， Top ， Middle和Bottom 。

有一個正確的浮動DIV應該在中間部分用戶滾動和停止滾動，在中間部分的頂部以及中間部分的底部被“留在原地”。

 #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { background-color: yellow; width: 30%; height: 150px; float: right; } 

 <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

JSFiddle： 小提琴

Answer 1

所以在這里你有使用jquery的解決方案：

1. 收聽scroll事件，並在向上/向下滾動時計算scrolling-section在Middle部分之外的位置。

2. 添加position: relative對於scrolling-section 。

3. 相應地調整scrolling-section的位置。

 $(document).scroll(function() { var wrapper = $('#Middle'); var box = $('#scrolling-section'); var offsetTop = - wrapper.offset().top + $(window).scrollTop(); var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight(); if (offsetBottom > 0 && offsetTop < 0) { box.css({ 'top': 0 }); } else if (offsetBottom > 0 && offsetTop > 0) { box.css({ 'top': offsetTop + 'px' }); } else { box.offset({ 'top': $(window).scrollTop() + offsetBottom }); } }); 

 #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { position: relative; background-color: yellow; width: 30%; height: 150px; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

請告訴我您對此的反饋。 謝謝！

Answer 2

需要一些Javascript才能讀取您想要更改要解決的div狀態的位置。 您可以使用getBoundingClientRect()方法執行此操作。 我找到了一個會告訴你的小提琴。 你會讀到#Middle的位置。 我添加了一個輸入字段，顯示值。 當倉位達到零時，變化將是。 然后，您可以更改＃scrolling-section的CSS屬性。

您將看到元素的一些附加讀數，以確保它可以定位並保持其原始寬度;

 var scrollposition = document.getElementById("Middle"); var scrollsection = document.getElementById("scrolling-section"); var scrollsection_offsetLeft = scrollsection.offsetLeft; var scrollsection_width = scrollsection.offsetWidth; var valy = document.getElementById("posy"); window.addEventListener("scroll", function(event) { valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top; if (valy.value <= 0) { scrollsection.style.position = "fixed"; scrollsection.style.top = "0px"; scrollsection.style.left = scrollsection_offsetLeft + "px"; scrollsection.style.width = scrollsection_width + "px"; } else { scrollsection.style.position = "static"; scrollsection.style.top = "auto"; scrollsection.style.left = "auto"; } }, false) 

 #posy { position: fixed; top: 0; } #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { background-color: yellow; width: 30%; height: 150px; float: right; } 

 <input type="text" id="posy" /> <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

Answer 3

我在我的手機上，但如果你添加

#scrolling-section {
  position: fixed;
  background-color: yellow;
  width: 30%;
  height: 150px;
  right: 8px;
}

這將滾動頁面，但實際上需要一個事件監聽器，當屏幕上出現＃scrolling-section時可能會觸發，可能會添加屬性position：fixed; 當#bottom出現時，另一個事件監聽器計算#middle set margin-top＆position：absolute;的大小; 希望這有助於指出正確的方向。