JavaScript-227：仿淘宝固定侧边栏

最新推荐文章于 2022-09-09 20:15:13 发布

臧小川

最新推荐文章于 2022-09-09 20:15:13 发布

阅读量180

点赞数

分类专栏： JavaScript基础

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/124584836

版权

网页滚动固定导航返回顶部 JavaScript事件 CSS布局

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

240 篇文章 25 订阅

订阅专栏

在这里插入图片描述

效果图

在这里插入图片描述

结构

    <div class="slide-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header">头部区域</div>
    <div class="banner">banner区域</div>
    <div class="main">主体区域</div>

CSS

        .slide-bar {
            width: 45px;
            height: 130px;
            margin-left: 600px;
            position: absolute;
            left: 50%;
            top: 300px;
            background-color: pink;
        }

        .header {
            width: 1200px;
            height: 150px;
            background-color: purple;
            margin: 10px auto;
        }

        .banner {
            width: 1200px;
            height: 250px;
            background-color: skyblue;
            margin: 10px auto;
        }

        .main {
            width: 1200px;
            height: 1000px;
            background-color: yellowgreen;
            margin: 10px auto;
        }

        span {
            position: absolute;
            bottom: 0;
            display: none;
        }

JS

  var slideBar = document.querySelector(".slide-bar");
    var banner = document.querySelector(".banner");
    var bannerTop = banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
    var slideBarTop = slideBar.offsetTop - bannerTop;  //固定定位之后，应该变化的数值
    console.log(slideBarTop);
    var main = document.querySelector(".main");
    var goBack = document.querySelector(".goBack");
    var mainTop = main.offsetTop;

    //1,页面滚动事件 scroll
    document.addEventListener("scroll", function ()
    {
        if (window.pageYOffset >= bannerTop)
        {
            slideBar.style.position = "fixed";
            slideBar.style.top = slideBarTop + "px";
        }
        else
        {
            slideBar.style.position = "absolute";
            slideBar.style.top = 300 + "px";
        }

        //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
        if (window.pageYOffset >= mainTop)
        {
            goBack.style.display = "block";
        }
        else
        {
            goBack.style.display = "none";
        }
    })