zoukankan      html  css  js  c++  java
  • 网页吸顶&&回到顶部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{margin:0;padding:0;}
            #header{
                 100%;
                height: 200px;
            }

            ul,li{list-style: none;}
            #nav{
                 100%;
                height: 80px;
                background: #000;
            }
            #nav>ul>li{
                float: left;
                text-align: center;
                line-height: 80px;
                color: #fff;
                 80px;
            }

    #t{
                 70px;
                height: 60px;
                background: red;
                position: fixed;
                right: 0;
                text-align: center;
                line-height: 60px;
                color: #fff;
                top: 400px;
                display: none;
            }
        </style>
    </head>
    <body style="height:3000px;">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li>首页</li>
                <li>文档</li>
                <li>我的</li>
                <li>设置</li>
            </ul>
        </div>

     <div id="t">回到顶部</div>
    </body>
    </html>
    <script>
     var oNav = document.getElementById("nav");

    var box = document.getElementById("t");
        window.onscroll = function () {
            var sTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(sTop>=200){
                oNav.style.position = "fixed";
                oNav.style.top = 0;

    box.style.display = "block";
            }else{
                oNav.style.position = "static";

     box.style.display = "none";
            }
        }
        box.onclick = function(){
            document.documentElement.scrollTop  =  document.body.scrollTop  = 0;
        }
    </script>

  • 相关阅读:
    chaos —— 混沌
    《菊与刀》original 的阅读
    《菊与刀》original 的阅读
    十六进制(二进制)编辑器
    十六进制(二进制)编辑器
    Hopfield 神经网络及稳态性的证明
    Hopfield 神经网络及稳态性的证明
    OpenGL(一)绘制圆、五角星、正弦曲线
    NYOJ 8 一种排序(comparator排序)
    oc 第五天(内存管理)
  • 原文地址:https://www.cnblogs.com/ngdty/p/9477461.html
Copyright © 2011-2022 走看看