技術標籤：JavaScriptjavascriptjs

案例：商城固定左側側邊欄

動圖

程式碼

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'
    }
})