尝试position:fixed通过更改top:javascript 中的css 值来滚动滚动 div 。div 不会移动，但不知道为什么。
html：
<div id="red">
<div id="blue"></div>
</div>
css：
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
js：
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.body.scrollTop / 10));
//console.log("yPos = " + yPos); //output is correct
document.getElementById('blue').style.top = yPos + 'px';
//document.getElementById('blue').setAttribute('top',yPos); //also tried this
});
https://jsfiddle.net/akzx43yL/
为什么topcss 值没有改变，我怎样才能做到这一点？请不要jquery。
两件事情：
document.documentElement.scrollTop，你应该使用window.pageYOffset（scrollTop没有在Chrome中发挥很好）。top；不0应该px附加到它们的值。这可以在以下内容中看到：
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(window.pageYOffset / 10));
document.getElementById('blue').style.top = yPos + "px";
// Optionally log the `top` value
//console.log(document.getElementById('blue').style.top);
});#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: absolute;
top: -10px;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}<div id="red">
<div id="blue"></div>
</div>希望这可以帮助！:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句