Issue
Trying to move a position:fixed
div on scroll by changing the top:
css value in javascript. The div won't move though, not sure why.
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/
Why isn't the top
css value changing and how can I get it to do so? No jquery please.
Solution
Two things:
- Instead of
document.documentElement.scrollTop
, you should usewindow.pageYOffset
(scrollTop
doesn't play nicely in Chrome). - You need to add a unit of measurement after you update
top
; values other than0
should havepx
appened to them.
This can be seen in the following:
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>
Hope this helps! :)
Answered By - Obsidian Age
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.