Javascript klebrig div nach blättern
Diese Frage ist für viele hier vielleicht dumm. Ich mache ein klebriges Div nach dem Scrollen in reinem JS. Einige Leute mögen raten, es in jQuery zu machen, aber ich bin nicht daran interessiert. Was ich brauche, ist etwas Ähnlichesdiese. Hier bewegt sich das Div ganz nach oben, aber ich brauche es, um 60px oben zu haben. Ich habe ein Skript erstellt, aber es funktioniert nicht. Kann mir jemand helfen, das zu lösen?
Hier ist mein Code.
HTML
<div id="left"></div>
<div id="right"></div>
CSS
#left{
float:left;
width:100px;
height:200px;
background:yellow;
}
#right{
float:right;
width:100px;
height:1000px;
background:red;
margin-top:200px;
}
JS
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
Das muss ich erreichen. Der linke Div muss habenmargin-top:200px
undposition:absolute
auf Seite laden. Wenn der Benutzer einen Bildlauf durch die Seite durchführt, sollte das linke Div einen Bildlauf durchführen und wenn es erreichttop:60px;
seine Position und der obere Rand sollten sich zu ändernposition:fixed
undmargin-top:60px;
Hier ist derGEIGE