# 位置操作

最新推荐文章于 2022-05-10 15:23:15 发布

大名张无忌

最新推荐文章于 2022-05-10 15:23:15 发布

阅读量106

点赞数 1

分类专栏： JS # jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_40029828/article/details/105320557

版权

JS 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

侧边栏点击页面滚动到相应位置

<style>
    body {
        margin: 0;
        height: 1800px;
    }

    .header {
        width: 1100px;
        height: 300px;
        background-color: skyblue;
    }

    .banner {
        width: 1100px;
        height: 500px;
        background-color: yellow;
    }

    section {
        width: 1100px;
        height: 300px;
        background-color: grey;
    }

    .main {
        width: 1100px;
        height: 800px;
        background-color: #f9b47f;
    }

    .footer {
        width: 1100px;
        height: 200px;
        background-color: orange;
    }

    .bar {
        display: none;
        position: fixed;
        left: 1100px;
        top: 200px;
        height: 500px;
        width: 80px;
    }

    div ul {
        padding: 0;
    }

    div ul li {
        list-style: none;
        height: 80px;
        width: 80px;
        border: 1px solid #4c4c4c;
    }

    .hidden {
        display: none;
    }
</style>

<body>
<section>其他模块1</section>
<section>其他模块2</section>
<div class="w">
    <div class="header">头部</div>
    <div class="banner">导航栏</div>
    <div class="main">主体</div>
    <div class="footer">底端</div>
</div>
<div class="bar">
    <ul>
        <li style="background-color: pink">头部</li>
        <li>导航栏</li>
        <li>主体</li>
        <li>底端</li>
        <li class="back hidden">回到顶端</li>
    </ul>
</div>
<script src="jqueryMin.js"></script>
<script>
    //6、声明一个开关，保证点击li的时候不会出现滚动时li的背景色一个个移动的样子，但是点击事件结束时要有回调函数，把flag置为true
    var flag = true;
    //4、页面滚动到其他模块2的距离，才显示bar
    var barDisplay = function () {
        if ($(document).scrollTop() >= $("section").eq(1).offset().top) {
            $(".bar").fadeIn();
        } else {
            $(".bar").fadeOut();
        }
    };
    barDisplay();
    $(window).scroll(function () {
        barDisplay();
        //5、页面滚动到对应的距离，对应的bar里的li变颜色。类似于被点击了
        //聪明方法，用遍历
        if (flag) {
            $('.w div').each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    $(".bar li").eq(i).css("background", "pink").siblings('li').css("background", "#fff");
                }
            })
        }
        /*//笨方法，一个个数
        if ($(document).scrollTop() >= $(".main").offset().top) {
            $(".bar li").css("background", "#fff");
            $(".bar li").eq(3).css("background", "pink");
        } else if ($(document).scrollTop() >= $(".banner").offset().top) {
            $(".bar li").css("background", "#fff");
            $(".bar li").eq(2).css("background", "pink");
        } else if ($(document).scrollTop() >= $(".header").offset().top) {
            $(".bar li").css("background", "#fff");
            $(".bar li").eq(1).css("background", "pink");
        } else {
            $(".bar li").css("background", "#fff");
            $(".bar li").eq(0).css("background", "pink");
        }*/
    });
    //1、点击bar里面的li，跳转到对应的那一栏
    $(".bar li").click(function () {
        flag = false;
        $("body,html").animate({
            scrollTop: $(".w div").eq($(this).index()).offset().top
        }, function () {
            flag = true;
        });
        $(this).css("background", "pink").siblings('li').css("background", "#fff");
    });
    //2、点击回到顶端，回到页面最上方
    $(".back").click(function () {
        $("body,html").animate({
            scrollTop: 0
        })
    });
    //3、超过一定距离，展示回到顶端按钮
    $(window).scroll(function () {
        if ($(document).scrollTop() >= $(".main").offset().top) {
            $(".back").removeClass("hidden");
        } else {
            $(".back").addClass("hidden");
        }
    });


    /*//原始代码写起来也太复杂了
    var banner = document.querySelector('.banner');
    var maxTop = banner.offsetTop;
    console.log(maxTop);
    box = document.querySelector('.bar');
    var maxFix = box.offsetTop - banner.offsetTop;
    var main = document.querySelector('.main');
    var backTop = main.offsetTop;
    var back = document.querySelector('.hidden');
    var animateslow = function (obj, target, callback) {
        clearInterval(obj.leaveslow);
        obj.leaveslow = setInterval(function () {
            if (window.pageYOffset == target) {
                clearInterval(obj.leaveslow);
                callback();
            }
            //保证盒子能走到目标位置，需要判断正负
            var step = (target - window.pageYOffset) / 20 > 0 ? Math.ceil((target - window.pageYOffset) / 20) : Math.floor((target - window.pageYOffset) / 20);
            console.log(step);
            scroll(0, window.pageYOffset + step);
        }, 15);
    }
    //滚动到一定距离时，出现回到顶端按钮
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= maxTop) {
            box.style.position = 'fixed';
            box.style.top = maxFix + 'px';
            if (window.pageYOffset >= backTop) {
                back.className = '';

            } else {
                back.className = 'hidden';
            }
        } else {
            box.style.position = 'absolute';
            box.style.top = '500px';
        }
    })
    back.addEventListener('click', function () {
        animateslow(window, 0);
    });*/
</script>
</body>

大名张无忌

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# 位置操作

侧边栏点击页面滚动到相应位置<style> body { margin: 0; height: 1800px; } .header { width: 1100px; height: 300px; background-color: skyblue; } .ban...
复制链接

扫一扫