zoukankan      html  css  js  c++  java
  • js相关小实例——滚动监听

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    </style>
    </head>
    
    <body>
    
    <div style="100%; height:100px; background-color:#63F"></div>
    <div id="menu" style="100%; height:50px; background-color:#F36;"></div>
    
    <input type="button" value="滚动" onclick="gun()" />
    
    <div style="100%; height:1000px; background-color:#FF6"></div>
    
    </body>
    <script type="text/javascript">
    
    window.onscroll = function(){
            var d = document.getElementById("menu");
            if(window.scrollY >= 100)
            {
                d.style.position = "fixed";
                d.style.top = "0px";
                
            }
            else
            {
                d.style.position = "relative";
            }
            
            
        }
        
        function gun()
        {
            window.scrollTo(0,100);
        }
    
    </script>
    </html>

    点击滚动按钮后

  • 相关阅读:
    京东精益敏捷教练分享:敏捷助力产品创新!
    设计规范 | 详解组件控件结构体系
    Axure响应式进阶
    通讯录表设计
    TEST1
    c#练习四单元总结
    窗体控件应用总结(1)
    .NET(c#理解)
    test2-11
    test1-1
  • 原文地址:https://www.cnblogs.com/binbinyouli123/p/6534731.html
Copyright © 2011-2022 走看看