zoukankan      html  css  js  c++  java
  • JS如何实现导航栏的智能浮动

    <script language="javascript">
        function smartFloat(obj) {
            var obj = document.getElementById(obj);
            var top = getTop(obj);
            var isIE6 = /msie 6/i.test(navigator.userAgent);
            window.onscroll = function () {
                var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (bodyScrollTop > top) {
                    obj.style.position = (isIE6) ? "absolute" : "fixed";
                    obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
                } else {
                    obj.style.position = "static";
                }
            }
            function getTop(e) {
                var offset = e.offsetTop;
                if (e.offsetParent != null) offset += getTop(e.offsetParent);
                return offset;
            }
        }
        window.onload = function () {
            smartFloat("nav");
        }

       </script>

    ****扩展*****

     //原生JS
        //获取div距离顶部的距离
        var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
         //获取滚动条的高度
        var sTop = document.body.scrollTop;
      //Jquery
        mTop = $('.mdiv')[0].offsetTop;
        sTop = $(window).scrollTop();
    
    
    $(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
    $(document).scrollLeft() 这是获取水平滚动条的距离

  • 相关阅读:
    java架构师学习路线-HTTP请求类型及说明
    java架构师学习路线-关闭HTTP的TRACE方法
    AC自动机模板
    loj 2721 [NOI2018] 屠龙勇士
    scrum介绍
    本地搭建nacos集群
    js对象
    函数声明与表达式、匿名函数与具名函数、立即执行函数
    第六章 SSH远程服务介绍
    第十二章 配置vlan
  • 原文地址:https://www.cnblogs.com/zhangmumu/p/7374836.html
Copyright © 2011-2022 走看看