HTML JS CSS 页面滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40999496/article/details/89667463

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div style="width: 1200px;margin: 0 auto 1000px auto;">
    <div style="height: 100px;"></div>
    <div class="divContainerContent">
        <ul class="divContainer">
            <li id="div01">div01</li>
            <li id="div02">div02</li>
            <li id="div03">div03</li>
            <li id="div04">div04</li>
        </ul>
    </div>
    <div class="div01 divList"></div>
    <div class="div02 divList"></div>
    <div class="div03 divList"></div>
    <div class="div04 divList"></div>
</div>

</body>
</html>

JS：

<script>
    $(document).ready(function () {
        // divContainer到顶部的距离
        var divContainer = $(".divContainer").offset().top;
        //div01到顶部的距离
        var div01Height = $(".div01").offset().top - $(".div01").height();
        var divContainerHeight = $(".divContainer").height();
        var div02Height = $(".div02").offset().top - $(".div02").height();
        var div03Height = $(".div03").offset().top - $(".div03").height();
        var div04Height = $(".div04").offset().top - $(".div04").height();
        $("#div01").click(function () {
            $('html,body').animate({scrollTop: div01Height-divContainerHeight}, 500);
            $(this).addClass("divActive").siblings().removeClass("divActive");
        });
        $("#div02").click(function () {
            $('html,body').animate({scrollTop: div02Height-divContainerHeight}, 500);
            $(this).addClass("divActive").siblings().removeClass("divActive");
        });
        $("#div03").click(function () {
            $('html,body').animate({scrollTop: div03Height-divContainerHeight}, 500);
            $(this).addClass("divActive").siblings().removeClass("divActive");
        });
        $("#div04").click(function () {
            $('html,body').animate({scrollTop: div04Height-divContainerHeight}, 500);
            $(this).addClass("divActive").siblings().removeClass("divActive");
        });
        $(document).scroll(function () {
            var scrollHeight = $(document).scrollTop();  //滚动高度
            if(scrollHeight>=divContainer){
                $(".divContainerContent").addClass("divContainerActive");
            }else{
                $(".divContainerContent").removeClass("divContainerActive");
                $("#div01").removeClass("divActive");
            }
        //    页面到顶部的高度-滚动的高度
            if(div01Height-scrollHeight<=divContainerHeight){
                $("#div01").addClass("divActive").siblings().removeClass("divActive");
            }
            if(div02Height-scrollHeight<=divContainerHeight){
                $("#div02").addClass("divActive").siblings().removeClass("divActive");
            }
            if(div03Height-scrollHeight<=divContainerHeight){
                $("#div03").addClass("divActive").siblings().removeClass("divActive");
            }
            if(div04Height-scrollHeight<=divContainerHeight){
                $("#div04").addClass("divActive").siblings().removeClass("divActive");
            }
        });
    });
</script>

CSS：

body{
            font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
            color:#000304;
            margin:0;
            background-color: #ffffff;
            min-width: 1350px;
        }
        p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
            margin:0;
            padding:0;
            list-style:none;
        }
        .divContainerContent{width: 100%;}
        .divContainer{width: 1200px;height: 50px;margin: 0 auto;}
        .divContainerActive{position: fixed;top:0;left: 0;}
        .divContainer li{float: left;width: 100px;height:50px;line-height: 50px;text-align: center;font-size: 15px;background: darkgray;color: #fff;margin-right: 15px;cursor: pointer;}
        .divContainer li.divActive{color: red;}
        .divList{width: 100px;height: 50px;margin-top: 200px;}
        .div01{background: red;}
        .div02{background: aqua;}
        .div03{background: chartreuse;}
        .div04{background: darkviolet;}

导航栏点击滚动