in JS, the sidebar changes from fixed to relative when the mouse is scrolled over the top, and the dynamic style cannot be displayed.
Learning
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< html >
< head >
<style>
.test {
top: 100px;
margin: 10px;
padding: 10px;
width: 300px;
position: relative;
border: 5px solid black;
height: 2000px;
background: -sharpff7a59;
}
.rr{height: 100px;margin-top: 200px;background: -sharp1a92cf;position: fixed;
top: 40px; }
</style> < / head >
< body >
< div class= "test" >
Click the button to get offsetTop for the test div.
<button onclick="myFunction()">Try it</button>
offsetTop is: <span id="demo"></span>
<div class="rr"></div>< / div >
< script >
var testDiv = document.getElementsByClassName("test")[0];
var orr=document.getElementsByClassName("rr")[0].innerHTML = testDiv.offsetTop;
var arr=document.getElementsByClassName("rr");
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
window.onscroll=function () {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(orr>=scrollTop){
//alert(orr)
arr.style.position="relative";
arr.style.height=200+"px";
}
else {
// alert()
arr.style.position="fixed";
arr.style.height=1000+"px";
}
}
< / script >
< / body >
< / html >