侧面导航

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wen936/p/7597163.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和CSS实现的固定位置导航菜单，该菜单会在页面滚动时显示或隐藏。此外，还详细说明了如何通过JavaScript监听滚动事件来控制导航菜单的显示状态，并实现了点击菜单项跳转到页面特定部分的功能。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div,body{
            padding: 0;
            margin: 0;
        }
        .header{
            width:100%;
            height: 1000px;
            background: palegoldenrod;
        }
        .page{
            width:100%;
            height:300px;
        }
        div{
            text-align: center;
            line-height: 300px;
            font-size: 50px;
        }
        .page:nth-child(2n){
            background: red;
        }
        .page:nth-child(2n+1){
            background: yellowgreen;
        }
        .footer{
            width:100%;
            height:500px;
            background: palevioletred;
        }
        ul li{
            list-style: none;
            width:80px;
            height:40px;
            border:1px solid #666;
            background: greenyellow;
            text-align: center;
            line-height: 40px;
        }
        ul{
            position: fixed;
            top:30%;
            left:2%;
            z-index: 1654;
            display: none;
        }
        .ul .current{
            background: white;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
    <div class="page">6</div>
    <div class="footer">ding</div>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>ding</li>
    </ul>
</body>
<script src="modules/jquery.min.js"></script>
<script>
    $(function(){
        $('li:last').on('click',function(){//点击ding回顶部
            $('html,body').animate({scrollTop:0},200);
        });
        var $header_h = $('.header').outerHeight();//获取头部的外部高度
        /*console.log($header_h);*/
        $(window).on('scroll',function(){
            var $h = $(window).scrollTop();//获取滚动条当前的值
            console.log($h);
            if ($h >= $header_h) {//如果当前滚动条的位置大于或等于头部的高度
                $('.ul').fadeIn();//那么ul淡入
            } else {
                $('.ul').fadeOut();//否则ul淡出
            }
            $switch($h);
        });
        $('.ul>li').on('click', function () {//给ul下面的每个li添加点击事件
            var $index = $(this).index();//设置一个$index变量并且把当前点击的li的下标值付给它
            var $section=$current_top($index);
            console.log($section)
            $('html,body').animate({//浏览器视口的相对滚动条顶部的偏移的动画效果
                scrollTop: $section
            }, 200);
        });
    })
    function $current_top($index){
        //设置一个变量$section并把点击一个li后当前一个section的滚动条偏移后的位置的值付给它
        var $section = $('.page').eq($index).offset().top-300;
        //给当前点击的li赋予类名current，并且移除与他同辈元素siblings()li的类名；
        $('.ul>li').eq($index).addClass('current').siblings().removeClass('current');
        return $section;
    }
    function $switch($h){
        switch (true) {
            case $h >= $current_top(5):
                break;
            case $h >= $current_top(4):
                break;
            case $h >= $current_top(3):
                break;
            case $h >= $current_top(2):
                break;
            case $h >= $current_top(1):
                break;
            case $h >= $current_top(0):
                break;
        }
    }
</script>
</html>