欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

依赖于Jquery的滚动监听

程序员文章站 2024-02-02 11:25:58
...

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

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

    先大概其来个效果图

    依赖于Jquery的滚动监听

上代码

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

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

biubiubiu 拜拜！！

相关标签： html css js 滚动监听

上一篇： jeecg t:datagrid列表使用进度条progressbar控件

下一篇： IDEA 快速创建 Spring boot 2.x Hello world

推荐阅读