js应用例子——滚动固定

Posted 2020-10-18 FTHeD

 

---

<style type="text/css">

*{ margin:0px auto; padding:0px;}
#wai{ width:100%; height:3000px;}
#head{ width:100%; height:200px; background-color:#C30;}
#dhl{ width:100%; height:150px; background-color:#00C;}
#neirong{ width:100%; height:2000px;}
.a{ width:100px; height:200px; background-color:#0FF; margin-top:30px;}
</style>

<div id="wai">
<div id="head"></div>
<div id="dhl"></div>
<div id="neirong">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>

<script>

//这里用到的window.onscroll 是网页滚动监听， scrollY是网页下拉是滚动的长度，用alert输出是不带px的数值；

window.onscroll = function(){
if(window.scrollY>200){
　　var dhl = document.getElementById("dhl");
　　dhl.style.position = "fixed";
　　dhl.style.top = "0px";
　　} else{
　　dhl.style.position="";
}
}
</script>