jQuery實現商品樓層的感受

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery滾動面板的實現</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <style type="text/css">
        *{padding: 0; margin: 0;list-style: none;}
        #wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;}
        h2{margin-bottom: 1000px;}
        #nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;}
        #nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;}
        #nav li a{text-decoration: none;}
        /*預約義樣式，表示所處的樓層*/
        .current{background:blue;}
        .current a{color: white;}
    </style>
</head>
<script type="text/javascript">
    $(function(){
        $("#nav li").hover(function() {
            $(this).addClass('current');
        }, function() {
            $(this).removeClass('current');
        });
        //經過判斷滾動條的高度和樓層高度來制定樣式。
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            //第二個標題1022，第三個標題2048;
            //用於添加樣式的函數。
            function addStyle(index){
                $("#nav li").removeClass();
                $("#nav li:eq("+index+")").addClass('current');
            }
            if (top<=1022) {
                addStyle(0);
            }else if (top>1022 && top<=2048) {
                addStyle(1);
            }else if (top>2048) {
                addStyle(2);
            };
        });
    });
</script>
<body>
    <div id="wrap">
        <h2 class="num1" id="target1">這是第一個標題</h2>
        <h2 class="num2" id="target2">這是第二個標題</h2>
        <h2 class="num3" id="target3">這是第三個標題</h2>
    </div>
    <ul id="nav">
        <li class="current"><a href="#target1">1F</a></li>
        <li><a href="#target2">2F</a></li>
        <li><a href="#target3">3F</a></li>
    </ul>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。