美文网首页
模拟导航栏吸顶的效果

模拟导航栏吸顶的效果

作者: ConRon | 来源:发表于2018-03-16 16:35 被阅读0次

    1.css部分

    body {padding: 0px;margin: 0;}
    .wrap {width: 600px;height: 500px;padding: 0 20px;}
    #nav {width: 603px;height: 40px;background: #39f;color: #fff;line-height: 40px;text-align: center;padding: 0;margin: 0;list-style: none;overflow: hidden;}
    #nav li { float: left;width: 200px;height: 60px;border-right: 1px solid #fff;}
    .fix {position: fixed;top: 0px;left: 20px;}
    

    2.html部分

    <div class="wrap">
            <h1>文章标题</h1>
            <ul id="nav">
                <li>首页</li>
                <li>导航1</li>
                <li>导航2</li>
            </ul>
            <div class="con">
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
                <p>简单的吸顶效果</p>
            </div>
        </div>
    

    3.js部分

    <script type="text/javascript">
            var tit = document.getElementById("nav");
            //alert(tit);
            //占位符的位置
            var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
            var inser = document.createElement("div");
            tit.parentNode.replaceChild(inser, tit);
            inser.appendChild(tit);
            inser.style.height = rect.height + "px";
    
            //获取距离页面顶端的距离
            var titleTop = tit.offsetTop;
            //滚动事件
            document.onscroll = function() {
                //获取当前滚动的距离
                var btop = document.body.scrollTop || document.documentElement.scrollTop;
                //如果滚动距离大于导航条据顶部的距离
                if(btop > titleTop) {
                    //为导航条设置fix
                    tit.className = "clearfix fix";
                } else {
                    //移除fixed
                    tit.className = "clearfix";
                }
            }
        </script>
    

    相关文章

      网友评论

          本文标题:模拟导航栏吸顶的效果

          本文链接:https://www.haomeiwen.com/subject/eflrqftx.html