jQuery实现商品楼层的感觉-优快云博客

本文介绍了一种使用jQuery实现的滚动面板效果，当页面滚动到不同位置时，导航菜单会自动切换样式，突出当前楼层的链接。通过监听窗口滚动事件并判断滚动条的位置，可以动态地为导航项添加预定义的样式类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>