案例：仿淘宝固定右侧侧边栏 天猫左侧导航栏 js小案例

案例：商城固定左侧侧边栏

---

动图

代码

html部分

<div class="leftnav">
    <ul>
        <li>导航</li>
        <li>超市</li>
        <li>酷玩</li>
        <li>家居</li>
        <li>户外</li>
        <li>生活</li>
        <li>酷玩</li>
        <li>家居</li>
        <li>户外</li>
        <li>生活</li>
    </ul>
</div>

css部分

.leftnav{
    position: fixed;
    left: 100px;
    top: 200px;
    width: 100px;
    display: none;
}
.leftnav li,.leftnav2 li{
    background-color: red;
    color: white;
    padding:5px 10px;
    overflow: hidden;
}
.leftnav2{
    position: absolute;
    top: 1300px;
    width: 100px;
    left: 100px;
}

js部分

var leftnav=document.querySelector('.leftnav')
document.addEventListener('scroll', function() {
    var num=Math.round(window.pageYOffset)
    if(num>=1120){
        leftnav.className='leftnav2'
        leftnav.style.display='block'
    }else if(num<=440){
        leftnav.style.display='none'
    }else{
        leftnav.className='leftnav'
        leftnav.style.display='block'
    }
})