固定导航栏案例

Posted 2021-01-24 lujieting

<div class="top" id="topPart">
    <img src="imgs/top.png" />
</div>
<div class="nav" id="navBar">
    <img src="imgs/nav.png" />
</div>
<div class="main" id="mainPart">
    <img src="imgs/main.png" />
</div>
<script src="../DOM/commer.js"></script>
<script>
    function getscroll() {
        return{
            left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
            top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
        };
    }
    window.onscroll=function () {
      //向上卷曲出去的距离和最上面的div的高度对比
        if(getscroll().top>=ver("topPart").offsetHeight){
            ver("navBar").className="nav fixed";
            ver("mainPart").style.marginTop=ver("navBar").offsetHeight+"px";
        }else {
            ver("navBar").className="nav";
            ver("mainPart").style.marginTop="10px";
        }
    };
</script>