根据浏览器滚动条高度判断进度条显示

码世界

已于 2022-09-07 15:17:50 修改

阅读量183

点赞数

分类专栏：前端知识文章标签： html 前端 servlet

于 2022-09-07 15:15:11 首次发布

本文链接：https://blog.csdn.net/qq_30607437/article/details/126745774

版权

前端知识专栏收录该内容

31 篇文章 1 订阅

订阅专栏

因为引了公共样式，公共样式在这里就不贴了，有些样式不对的地方，不好意思，这个需要自己需要调整一下

以下是HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面六about us-Tech roadmap-2</title>
    <link rel="stylesheet" type="text/css" href="./css/globalCopy.css">
    <link rel="stylesheet" type="text/css" href="./css/aboutUs.css">
</head>
<body>
    <!-- 主体部分 -->
    <div class="auMain">
        <!-- 头部 -->
        <div class="gh-head" style="width: 100%; height: 103px;"></div>
        <!-- 文字部分 -->
        <div class="comFlex auTextBox">
            <div class="auText">
                <span>大家好欢迎来到我的博客</span>
                <span>希望代码对你有用</span>
                <span>码世界</span>
            </div>
        </div>
        <!-- Mission & Values -->
        <div class="comFlex">
            <div class="comWidth">
                <div class="comFlex mvBox">
                    <!-- 左 -->
                    <p class="mvLeft">好吧,看好这边哈</p>
                    <!-- 中 -->
                    <ul class='mvLine'>
                        <!-- 1 -->
                        <li class="mvFistLi" style="background:green;">
                            <img src="./img/mv1.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine"></p>
                            <img src="./img/mv2.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine"></p>
                            <img src="./img/mv3.png" alt="" class="mvLiIcon">
                        </li>
                        <!-- 2 -->
                        <li class="mvSecondLi" style="background:purple;">
                            <img src="./img/mv4.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine on"></p>
                            <img src="./img/mv2.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine"></p>
                            <img src="./img/mv3.png" alt="" class="mvLiIcon">
                        </li>
                        <!-- 3 -->
                        <li class="mvThirdLi" style="background:burlywood">
                            <img src="./img/mv4.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine on"></p>
                            <img src="./img/mv5.png" alt="" class="mvLiIcon">
                            <p class="mvLiLine on"></p>
                            <img src="./img/mv6.png" alt="" class="mvLiIcon">
                        </li>
                    </ul>
                    <!-- 右 -->
                    <div class="mvRight">
                        <span class="mvRiTitle">标题一</span>
                        <p class="mvRiCont">不重要你想写啥就写啥,少看短视频,少玩游戏,少吃垃圾食品,少熬夜,少抱怨,少说同事坏话,少吃盐</p>
                        <span class="mvRiTitle">标题二</span>
                        <p class="mvRiCont">当然最好是正能量一点,多看书,多锻炼,多交比自己优秀的朋友,多喝水,多旅游,多学习,让自己更加快乐开心</p>
                        <span class="mvRiTitle">标题三</span></span>
                        <p class="mvRiCont on ">当然你不想正能量,想白蓝也没毛病,生活,活的开心最重要,怎么舒服怎么来,但是不要做损坏别人的事情,你是最棒的!!!</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Meet the team -->
        <div class="mttBox" style="height: 2000px;"></div>
    </div>
    <script type="text/javascript" language="Javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" language="Javascript" src="./js/aboutUs.js"></script>
</body>
</html>

以下是CSS部分

body{
    background-color: #000;
}
.auMain{
    width: 100%;
    height: auto;
}
.comFlex{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: center; */
}
.comWidth{
    flex: 1;
    max-width: 1200px;
}
.dashedLine{
    border-top: 1px dashed #fff; 
}
.comAuto{
    display: inline-flex;
    /* 固定定位跟父级没有关系,它以屏幕为准 */
    position: relative;
    top: 0;
    left: 50%;
    /* 固定的盒子应该有宽度 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    vertical-align: bottom;
}
.comAuto.on{
    display: block;
}
.comRe{
    position: relative;
}
/* 文字部分 */
.auText{
    flex: 1;
    max-width: 906px;
    height: auto;
    margin-top: 140px;
    margin-bottom: 203px;
}
.auText span{
    display: inline-block;
    width: 100%;
    font-size: 50px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 76px;
    text-align: center;
}
/* Mission & Values */
.mvBox{
    /* padding-left: 612px; */
    height: auto;
}
/* 左 */
.mvLeft{
    height: 70px;
    font-size: 50px;
    font-family: Poppins-Bold, Poppins;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 76px; 
}
/* 中 */
.mvLine{
    /* width:56px; */
    list-style: none;
    margin: 0;
    padding: 0;
    /* flex: 1; */
    height: auto;
    margin-left:184px;
}
.mvLine.on{
    margin-left:612px;
}
.mvLine li{
    /* display:inline-block; */
    padding: 0;
    width: 56px;
    height: auto;
}
.mvLiIcon{
    max-width: 56px;
    height: 56px;
    margin: 0 auto;
}
.mvLiLine{
    width: 2px;
    height: 182px;
    border-left: 4px solid #21272D;
    margin: 0 auto;
}
.mvLiLine.on{
    border-left: 4px solid #1990FF;
}
.mvLine li:nth-child(2),.mvLine li:last-child{
    display: none;
}
/* 右 */
.mvRight{
    flex: 3;
    height: auto;
    margin-left: 72px;
}
.mvRiTitle{
    display: inline-block;
    width: 100%;
    height: 56px;
    font-size: 26px;
    font-family: Poppins-Bold, Poppins;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 56px;
}
.mvRiCont{
    width:100%;
    height: 182px;
    font-size: 16px;
    font-family: Poppins-Regular, Poppins;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 28px;
}
.mvRiCont.on{
    height: 56px;
}

以下是JS部分

$(document).ready(function () {

    var drawEl = document.querySelector('.mvBox');   //获取父元素标签
    //var parent = drawEl.parentElement;                  //父元素：容器
    
    /**
    * 获取父元素的大小及其相对于视口的位置。
    * getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。(当前没用到)
    */
    //var parentRect = parent.getBoundingClientRect();

    var getHeadHeight  =  $('.gh-head').innerHeight();       //获取头部高度
    var auTextHeight  = $('.auTextBox').innerHeight();      //获取全文字区高度
    var lineHeight = $('.mvLiLine').innerHeight();         //获取轴线‘单个’高度
    var mttBoxH  = $('.mttBox').offset().top-60;         //获取相对位置mttBox高度  


    $(window).scroll(function () {

        var scrollTop = $(window).scrollTop();              //获取鼠标滚动位置
        var getMvBoxH = $('.mvBox').offset().top;

        if(scrollTop > getHeadHeight && scrollTop < lineHeight){   //大于部高度小于轴线高度 
            $('.mvFistLi').hide();
            $('.mvSecondLi').show();
            $('.mvThirdLi').hide();
        }else if( scrollTop > lineHeight && scrollTop < auTextHeight){ 
            //大于轴线高度小于全文字区高度
            $('.mvFistLi').hide();
            $('.mvSecondLi').hide();
            $('.mvThirdLi').show();
        }else if(scrollTop == 0 || scrollTop < getHeadHeight){   // 回到顶部时
            $('.mvFistLi').show();
            $('.mvSecondLi').hide();
            $('.mvThirdLi').hide();
        }

       
        //左侧部分在区块内滚动
        if(scrollTop >= getMvBoxH ){    
            //滚动条  大于  盒子距离顶部位置 高度
            $('.mvLeft').css("width",drawEl.offsetWidth);
            $(".mvLeft").css({"position":"fixed","top":0});     //字体上符
            $('.mvLine').addClass('on');                        //设置轴线偏离距离

            
            if(scrollTop >= mttBoxH){           
                //滚动条  大于等于  超出盒子外的距离              
                $('.mvLeft').css("width",'auto');
                $(".mvLeft").css({"position":"static"});        //回到初如位置
                $('.mvLine').removeClass('on');                 //轴线回到初始位置
            }

        
        }else if( scrollTop < getMvBoxH){           
            //滚动条  小于  盒子距离顶部位置 高度 ---> 都回到初始位置
            $('.mvLine').removeClass('on'); 
            $('.mvLeft').css("width",'auto');
            $(".mvLeft").css({"position":"static"});
            
        }


   })


})

核心思想如下：获取元素距浏览器顶端的距离

转载自：获取元素距浏览器顶端的距离_九木旭的博客-CSDN博客_获取元素到浏览器顶部的距离

$(function(){

    //获取要定位元素距离浏览器顶部的距离

    var navH = $(".nav").offset().top;

    //滚动条事件

    $(window).scroll(function(){

        //获取滚动条的滑动距离

        var scroH = $(this).scrollTop();

        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

        if(scroH>=navH){

            $(".nav").css({"position":"fixed","top":0});

        }else if(scroH<navH){

            $(".nav").css({"position":"static"});

        }

    })

})