js 实现吸顶效果

简单的吸顶效果
<!DOCTYPE>
<html>
<head>
<style type="text/css">
    body {
        padding:0;
        margin:0;
    }
    #nav {
        width:100%;
        height:60px;
        background:#39f;
        color:#fff;
        line-height:60px;
        text-align:center;
        padding:0;
        margin:0;
    }
    #nav li {
        float:left;
        width:20%;
        height:60px;
    }
    .fix {
        position:fixed;
        top:0;
        left:0;
        z-index: 1;
    }
    .hader-img {
        position: fixed;
        left: 0;
        top: 0;
    }
    .content {
        position: relative;
        z-index: 2;
    }
</style>
</head>

<div class="wrap">
    <div class="hader-img">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565094369494&di=7e1e19d2b2d913d3aecbe4fcc67b034a&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201710%2F27%2F6239258bb41622006605f967200b806b.jpg" alt="">
    </div>
    <div class="content">
        <div class="header">
            <h1>商城标题</h1>
            <p>子标题子标题子标题子标题子标题子标题子标题</p>
            <ul id="nav">
                <li>导航内容</li>
                <li>导航内容</li>
                <li>导航内容</li>
            </ul>
        </div>
        <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>
</div>

<script type="text/javascript">
let headerNav = document.getElementById("nav");
//占位符的位置
let rect = headerNav.getBoundingClientRect();
//获得页面中导航条相对于浏览器视窗的位置
let childDemoe = document.createElement("div");
headerNav.parentNode.replaceChild(childDemoe, headerNav);
childDemoe.appendChild(headerNav);
childDemoe.style.height = rect.height + "px";

//获取距离页面顶端的距离
var headerNavleTop = headerNav.offsetTop;
//滚动事件
document.onscroll = function(){
    //获取当前滚动的距离
    var btop = document.body.scrollTop||document.documentElement.scrollTop;
    //如果滚动距离大于导航条据顶部的距离
    if(btop>headerNavleTop){
        //为导航条设置fix
        headerNav.className = "clearfix fix";
    }else{
        //移除fixed
        headerNav.className = "clearfix";
    }
}
</script>
</html>


后续优化
猜你喜欢
