网站侧边栏固定

网站侧边栏固定

这个网站侧边栏固定可以避免网站内容太多，下拉后看不到导航提示，网站侧边栏固定js代码，可以使网站得侧边栏导航随着内容区域滚动，以保持导航提示功能

侧边栏固定效果图

html代码

<div class="nav">
        <p>导航栏</p>
    </div>
    <div class="content">
        <div id="content-left">
            <ul>
                <li>MAK-1</li>
                <li>MAK-2</li>
                <li>MAK-3</li>
                <li>MAK-4</li>
                <li>MAK-5</li>
                <li>MAK-6</li>
                <li>MAK-7</li>
                <li>MAK-8</li>
                <li>MAK-9</li>
            </ul>
        </div>
        <div id="content-right">
            内容区
        </div>
    </div>
    <div class="footer">
        <p>本网页由MakStudio提供</p>
    </div>

css代码

*{
    padding: 0;
    margin: 0;
}
.nav{
    width:800px;
    margin: 0 auto;
    height:60px;
    background: #172c3d;
    text-align: center;
}
.nav p{
    color:#FFF;
    line-height: 60px;
}
.content{
    width: 800px;
    margin: 20px auto 0px auto;
    overflow: hidden;
    position: relative;

}
#content-left{
    width: 300px;
    float: left;
}
#content-left ul li{
    list-style: none;
    width: 300px;
    height:40px;
    background-color:#d96830;
    color:#FFF;
    text-align: center;
    line-height: 40px;
    border-bottom:1px solid #172c3d;

}
#content-left ul li:hover{
    background-color:#264863;
}
#content-right{
    width: 450px;
    height:800px;
    float: right;
    background-color: #e6b33d;
    font-size: 18px;
    color:#FFF;
    text-align: center;

}
.footer{
    width: 800px;
    height:40px;
    margin:20px auto 0 auto;
    text-align: center;
    overflow: hidden;
    background: #172c3d;
    color: #FFF;
}
.footer p{
    line-height: 40px;
}

js代码

<script>
    var getWindow = $(window);
    getWindow.scroll(function(){
        var scrollHeight = getWindow.scrollTop();
        var contentHeight = $("#content-right").height() - $("#content-left").height();
        console.log(contentHeight)
        if(scrollHeight>80 && scrollHeight<contentHeight+80){
            $("#content-left").css({
                position:"absolute",
                left:"0px",
                top:scrollHeight-80+"px"
            })
        }else if(scrollHeight <= 80){
            $("#content-left").css({
                position:"absolute",
                left:"0px",
                top:"0px"
            })

        }
    })
    </script>

项目实践源代码gitHub链接，请关注微信公众号MakStudio

哎呦，内容结束…持续更新中