html如何制作悬浮窗,使用js实现悬浮窗效果方法

很多网站效果，当页面向下滚动到某高度时候，导航栏或者其他会悬浮固定到顶部或某个位置，那么下面鹏仔就给大家简单介绍下

css代码

.show{

position: fixed;

top: 0;

}

#nav{

width: 100%;

height: 60px;

background: pink;

}

.box{

height: 2600px;

width: 100%;

background: skyblue;

}

在style里面，我给class名为show的写了样式，加了固定定位，让他固定到顶部，但并没有直接给下方两个盒子去加这个class名称

html代码

我是一个悬浮窗

我主要是来撑个高度

JS代码

//悬浮窗

//首先获取nav

var nav = document.getElementById('nav');

//当滚动条滚动时候开始执行

window.onscroll = function () {

//获取下页面的滚动条高度

var top = document.documentElement.scrollTop || document.body.scrollTop;

//判断比较是否达到700的高度

if(top >= 700) {

//是的话，就给加上class名

nav.classList.add('show');

} else {

//如果不是，那么删除class名

nav.classList.remove('show');

}

};

在JS代码里面，我获取了浏览器的滚动条高度，再进行了判断，当浏览器滚动条开始滚动就开始执行，当滚动到700的时候，给nav的盒子加上class名show，这样他就实现了一直悬浮固定到顶部的效果，再接着，也就是else了，否则删除class名。

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓