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的滚动下方另一一度达到

回答

相关问题