依赖于Jquery的滚动监听

最新推荐文章于 2024-08-09 02:17:55 发布

谷小伟

最新推荐文章于 2024-08-09 02:17:55 发布

阅读量656

点赞数

分类专栏：简单插件、小功能文章标签： html css js 滚动监听

本文链接：https://blog.csdn.net/qq_38347669/article/details/81326245

版权

简单插件、小功能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

固定导航滚动监听，依赖于Jquery

之前一直用的是bootstrap的滚动监听，用的是a标签的锚链接，发现有些不太好的地方，并且最近有些小的网站并不想引入bootstrap一个这么大的插件，似乎对一些网站来说略显臃肿，不管怎么样吧，抽时间自己写了一版，希望可以帮到大家吼！

先大概其来个效果图

上代码

我的代码总是全篇的哦，比较方便，但是希望大家也要认真缕清楚逻辑的哈

<!DOCTYPE HTML>
<html>
<head>
    <title>导航定位</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style type="text/css">
        * {
            margin:0px;
            padding:0px;
            font-family:'微软雅黑';
        }
        .part {
            height:400px;
            border:1px solid #5c7688;
            width:80%;
            float: right;
        }
        .div2{
            height: 600px;
        }
        .div3{
            height: 800px;
        }
        .div4{
            height: 1000px;
        }
        .div5{
            height: 1200px;
        }
        .div6{
            height: 1400px;
        }
        .div7{
            height: 1600px;
        }

        ul {
            overflow:hidden;
            position:fixed;
            top:300px;
            left: 20px;
        }
        li {
            width:100px;
            height:40px;
            background: #5c7688;
            text-align:center;
            line-height:40px;
            color:#fff;
            font-size:18px;
            cursor:pointer;
            border-bottom:1px solid #fff;
            box-sizing: border-box;
        }
        li.active {
            border: 1px solid #5c7688;
            margin-bottom: 1px;
            background: #fff;
            color: #666;
        }
    </style>
    <script src="../js/jquery-3.1.2.min.js"></script>
</head>
<body>
<div class="wrap">
    <div class="div1 part">内容区1</div>
    <div class="div2 part">内容区2</div>
    <div class="div3 part">内容区3</div>
    <div class="div4 part">内容区4</div>
    <div class="div5 part">内容区5</div>
    <div class="div6 part">内容区6</div>
    <div class="div7 part">内容区7</div>
</div>

<ul class="nav_ul">
    <li class="li1 active">标题1</li>
    <li class="li2">标题2</li>
    <li class="li3">标题3</li>
    <li class="li4">标题4</li>
    <li class="li5">标题5</li>
    <li class="li6">标题6</li>
    <li class="li7">标题7</li>
</ul>

<script type="text/javascript">

    /* 滚动监听 */
    // 定义一个获取所有div的距离顶部高度的数组
    var divOffsetTopArr = [
        $('.div1').offset().top,
        $('.div2').offset().top,
        $('.div3').offset().top,
        $('.div4').offset().top,
        $('.div5').offset().top,
        $('.div6').offset().top,
        $('.div7').offset().top
    ];

    // 监听页面滚动(每次滚动都做一次循环判断)
    $(window).scroll(function() {
        for(var i=0; i<$('.wrap .part').length; i++) {
            if($(this).scrollTop() > (divOffsetTopArr[i] - 50)) {  
            // 减去一个适当的固定值，可以让点击标题和滚动事件不冲突，否则只有页面滚动到当前内容区内，标题样式才会定位，稍微早点，给每个内容区留一点空间；
            //有点拗口，大家可以去掉这个固定值，看着页面顶部，滚动鼠标，测试一下，也可以根据自己的需要改变这个值；
                $('.nav_ul li').eq(i).addClass('active').siblings().removeClass('active');
            }
        }
    });

    /* 点击导航滚动定位 */
    $('.nav_ul li').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        $('body, html').animate({scrollTop: divOffsetTopArr[$(this).index()]}, 100);
    });
</script>
</body>
</html>