div的滾動下方另一一度達到

頁

我試圖讓DIV2期間保持固定的頂DIV1 DIV2 DIV3一次滾動過去DIV1一段時間後達到它的頂部滾動，然後div3滾動下它

我使用html，css，javascript爲此，沒有jquery。

我試圖調整這一點。

window.onscroll = function() { 
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
    if (scrollTop >= document.getElementById("div1").offsetTop) { 
    document.getElementById("div3").style.position = "relative"; 
    document.getElementById("div2").style.marginTop = " 70px"; 
    document.getElementById("div3").style.marginTop = "- 50px"; 
    } else { 
    document.getElementById("div3").style.position = "static"; 
    document.getElementById("div2").style.marginTop = "0px"; 
    document.getElementById("div3").style.marginTop = "0px"; 
    } 
}

現在，我想這一點： VAR objDiv =的document.getElementById（「DIV2」）; objDiv.scrollTop = objDiv.scrollHeight;

window.onscroll = function() { 
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
if (scrollTop >= div2) { 
    document.getElementById("copername").style.zIndex = "1"; 
    document.getElementById("copername").style.position = "fixed";

來源

2017-07-26 uniXVanXcel

你能分享你的HTML，也許在一個小提琴，所以我們可以看到什麼DOM樣子？ – trevorp

thnks但它很大，但基本上它只是一個接着一個的3個div – uniXVanXcel

有人願意幫助你解決你的問題，免費，並且你以「多麼難以想象......」而復出。比「不必設想」更難。由於其他人很容易想象，因此您不應該難以創建示例。 – Ernesto

最簡單的事情可能是用JS添加/刪除引發.sticky類通過滾動過去offsetHeightdiv1的：

window.onscroll = function() { 
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
    if (scrollTop > document.getElementById("div1").offsetHeight) { 
    document.getElementById("div2").classList.add('sticky'); 
    document.getElementById("div3").style.marginTop = "600px"; 
    } else { 
    document.getElementById("div2").classList.remove('sticky'); 
    document.getElementById("div3").style.marginTop = "0px"; 
    } 
}

您還需要確保你的最後#div3有更高的Z指數和絕對定位在您的CSS：

#div3 { 
    z-index: 100; 
    position: absolute; 
    margin-top: 0px; 
}

演示：JSFiddle

來源

2017-07-26 19:29:50 trevorp

謝謝，但由於某種原因，它不工作，但IAM尋找解決方案 – uniXVanXcel

你有沒有比較我提供的[小提琴]（https://jsfiddle.net/yocvLjao/3/）？似乎正在爲我工作。 – trevorp

謝謝，iam仍然看着也許錯誤是在我身邊，brb – uniXVanXcel

你可以嘗試這樣的事情。我認爲這可以達到你正在尋找的結果。

您可以從div2的.offsetTop中減去window.pageYOffset。這是在滾動功能開始之前設置的。測試這個表達式是否小於零通過JS應用下面的CSS樣式：

div2.style.position = 'fixed' 
div2.style.top = '0'; 
div3.style.position = 'absolute' 
div3.style.zIndex = "-1"; 
return div3.style.marginTop = div2Height + "px";

否則應用這個樣式。

div2.style.position = 'relative' 
div3.style.position = 'relative' 
return div3.style.marginTop = 0;

var div2 = document.getElementById('div2'), 
 
    div2Pos = document.getElementById('div2').offsetTop, 
 
    div2Height = document.getElementById('div2').offsetHeight, 
 
    div3 = document.getElementById('div3'); 
 

 
document.addEventListener('scroll', function() { 
 
    var windowPos = window.pageYOffset; 
 

 
    if ((div2Pos-windowPos) < 0){ 
 
    div2.style.position = 'fixed' 
 
    div2.style.top = '0'; 
 
    div3.style.position = 'absolute' 
 
    div3.style.zIndex = "-1"; 
 
    return div3.style.marginTop = div2Height + "px"; 
 
    } 
 

 
    div2.style.position = 'relative' 
 
    div3.style.position = 'relative' 
 
    return div3.style.marginTop = 0; 
 
});

div{ 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 

 
#div1{ 
 
    background: skyblue; 
 
} 
 

 
#div2{ 
 
    background: darkgrey; 
 
} 
 

 
#div3{ 
 
    background: steelblue; 
 
    color: white; 
 
    height: 3000px; 
 
}

<div id="div1"><h1>Content</h1></div> 
 
<div id="div2"><h1>Other Content</h1></div> 
 
<div id="div3"><h1> Some more Content</h1></div>

來源

2017-07-26 19:57:31

謝謝iam試圖將它應用到我的情況，並將brb在一分鐘 – uniXVanXcel

div的滾動下方另一一度達到

回答

相關問題