app直播源码,利用原生JS实现回到顶部以及吸顶效果

app直播源码,利用原生JS实现回到顶部以及吸顶效果

 

1
 <style><br>        .box1{<br>            width: 1200px;<br>            height: 800px;<br>            <br>            margin: 0 auto;<br>        }<br>        .box2{<br>            width: 1200px;<br>            height: 800px;<br>            background-color:palegreen;<br>            margin: 0 auto;<br>        }<br>        /* 设置了box1 box2的高度都为800px 是为了页面出现滚动条 */<br>        .gotop {<br>            position: fixed;<br>            bottom: 50px;<br>            right: 5px;<br>            width: 70px;<br>            height: 50px;<br>            text-align: center;<br>            line-height: 50px;<br>            color: #fff;<br>            background-color: aquamarine;<br>        }<br>        /* gotop去顶部 固定定位 定在底部  */<br> <br>        .nav {<br>            width: 1200px;<br>            height: 30px;<br>            background-color: yellow;<br>            position: fixed;<br>            top: 0;<br>            left: 50%;<br>            transform: translate(-50%);<br>            display: none;<br>        }<br>        /* nav头部的导航栏 固定定位 同时让它隐藏 */<br>    </style><br></head><br><body><br>    <div class="box1"></div><br>    <div class="box2"></div><br>    <div class="gotop">回到顶部</div><br>    <div class="nav"></div><br></body><br><script><br>    //实现回到顶部效果<br>    var oGo = document.querySelector(".gotop");//获取去顶部的元素<br>    var timer = null;//把定时器置为空<br>    oGo.onclick = function () {//点击事件 <br>        clearInterval(timer);//清除定时器<br>        timer = setInterval(function () {<br>            document.documentElement.scrollTop -= 10;//滚动条每次距离顶部的距离减10<br>            var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离<br>            console.log(oSt);<br>            if (oSt === 0) {<br>                clearInterval(timer);//如果距离顶部距离为0 清除定时器<br>            }<br>        }, 20);<br>    }<br>    //实现吸顶效果<br>    window.onscroll = function () {//滚动监听事件<br>        var oNav = document.querySelector(".nav");//获取导航nav里元素<br>        var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离<br>        if (oSt >= 100) {<br>            oNav.style.display = "block";//如果滚动条距离顶部的距离大于100 显示导航nav<br>        } else {<br>            oNav.style.display = "none";//否则不显示<br>        }<br>    }<br></script>

思路:

1.回到顶部

 1.需要出现滚动条(设置了box1 box2的高度都为800px ,也可以只设置一个盒子,高度设置大一点,出现滚动条即可)。

 

2.回到顶部的固定定位设置(利用固定定位 定在底部)。

 

 3.设置点击事件onclick(点击回到顶部触发事件)。

 

 4.设置定时器可以改变滚动条距离顶部的距离(还需要进行判断,如果距离顶部距离为0时,要清除定时器,不然会一直调用,占用内存)。

 

2.吸顶效果

1.利用滚动监听事件 window.onscroll。

 

  2.设置一个nav导航的盒子,固定定位 ,同时让它隐藏。

 

3.获取滚动条距离顶部的距离,然后进行判断。如果滚动条距离顶部的距离大于100 显示导航nav,否则都是隐藏不显示(这里的高度可以自己设置)。

 以上就是 app直播源码,利用原生JS实现回到顶部以及吸顶效果,更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示