页面返回顶部和固定导航栏js基础案例

铃儿响叮当不响

已于 2022-07-19 21:24:31 修改

阅读量86

点赞数

分类专栏：前端js笔记文章标签： css javascript html

于 2022-07-19 19:23:32 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125877653

版权

JavaScript DOM操作滚动事件返回顶部 CSS定位

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

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

案例代码

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .content {
            margin: 0 0 0 200px;
            overflow: hidden;
            width: 800px;
            height: 3000px;
            background-color: skyblue;
            float: left;
        }

        .backtop {
            margin-left: 1000px;
            margin-top: 550px;
            width: 30px;
            position: fixed;
            float: left;
        }

        .backtop .icon {
            height:50px;
            width: 50px;
            display: none;
            opacity: 0.3;
        }

        .header {
            position: fixed;
            top: -80px;
            left: 0;
            width: 100%;
            height: 80px;
            background-color: pink;
            text-align: center;
            color: white;
            line-height: 80px;
            font-size: 20px;
            transition: all .3s;
        }

        .miaosha {
            width: 300px;
            height: 300px;
            background-color: sandybrown;
            margin-top: 500px;
            color: brown;
        }
    </style>
</head>
<body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
        <div class="miaosha">秒杀模块</div>
    </div>
    <div class="backtop">
        <img class="icon" src="./image/箭头.jpg">
    </div>
    <script>
        // 1、页面滚动事件
        let miaosha = document.querySelector('.miaosha')
        let header = document.querySelector('.header')
        let backtop = document.querySelector('.backtop')
        let icon = document.querySelector('.icon')
        window.addEventListener('scroll',function(){

            if(document.documentElement.scrollTop >= backtop.offsetTop){
               icon.style.display = 'block'
               } else{
                icon.style.display = 'none'
               }
            // console.log(document.documentElement.scrollTop)
            // 2、要检测滚动的距离 >= 秒杀模块的offsetTop值 则滑入
            // console.log(miaosha.offsetTop) 
            if( document.documentElement.scrollTop >= miaosha.offsetTop){
             header.style.top = '0'
            }else{
             header.style.top = '-80px'   
            }
        })
         // 回到顶部
        backtop.addEventListener('click',function(){
            document.documentElement.scrollTop = 0
         })
    </script>
</body>
</html>