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() 这是获取水平滚动条的距离

  • 相关阅读:
    【BZOJ1015】星球大战starwar
    【BZOJ1878】HH的项链
    【BZOJ1012】最大数maxnumber
    【BZOJ3767】A+B Problem加强版
    【BZOJ1406】密码箱
    【BZOJ1067】降雨量
    【BZOJ1305】dance跳舞
    【BZOJ1509】逃学的小孩
    【BZOJ1103】大都市meg
    【BZOJ3262】陌上花开
  • 原文地址:https://www.cnblogs.com/zhangmumu/p/7374836.html
Copyright © 2011-2022 走看看