zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    浏览器渲染页面
    递归求1-100之和
    border属性
    ES6 Class
    数组去重
    get、post请求
    对象冒充继承
    原型链继承
    实现JS数据拷贝
    【转】centos升级curl版本
  • 原文地址:https://www.cnblogs.com/forqiwen/p/8098065.html
Copyright © 2011-2022 走看看