网站侧边栏固定

这个网站侧边栏固定可以避免网站内容太多，下拉后看不到导航提示，网站侧边栏固定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

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