js应用例子——滚动固定


<style type="text/css">

*{ margin:0px auto; padding:0px;}
#wai{ 100%; height:3000px;}
#head{ 100%; height:200px; background-color:#C30;}
#dhl{ 100%; height:150px; background-color:#00C;}
#neirong{ 100%; height:2000px;}
.a{ 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>

原文地址:https://www.cnblogs.com/forqiwen/p/8098065.html