悬浮窗在很多网页里面都有使用,在小风车这里曾经也使用过.现在把遇到的悬浮窗问题都总结在本文.
一 简单固定定位的悬浮窗
1.1 这种悬浮窗一般悬浮在页面底部,比如:淘宝,京东等一直悬浮在页面的固定位置上.这种的做法很简单,我只需要给盒子一个固定定位即可.但是一定要提高盒子的层级,避免与页面上其他定位冲突.
1.2 具体代码实现:
/*给盒子一个固定的样式就可以了*/
#scrollsidebar {
width: 64px;
position: fixed;
top: 600px;
right: 0;
}
二 页面滚动与悬浮窗的结合
2.1 当页面滚动到一定距离的时候,才动画显示悬浮窗.这里就需要利用js代码来控制盒子的显示与隐藏,当页面滚动到600px时就显示悬浮窗,小于这个距离就隐藏悬窗.
2.2 代码实现
此时css的样式还是将悬浮窗事先固定在此处,不过先隐藏,滚动到此处时在显示
/*先隐藏*/
#scrollsidebar {
width: 64px;
position: fixed;
top: 600px;
right: 0;
display: none;
}
JS控制代码:
window.onscroll = function(){
//页面滚动高度与600比较
if($('html,body').scrollTop() > 600) {
//显示悬浮窗
$('#scrollsidebar').show(2000);
}else {
//隐藏悬浮窗
$('#scrollsidebar').hide(2000);
}
}
三 导航栏形式的悬浮窗
3.1 这种形式的悬浮窗,就是页面滚动到哪里,对应的导航栏就高亮哪里.与我们小风车里面锚点定位一样.https://blog.csdn.net/weixin_42839080/article/details/82825295
这里才更新代码.
最后,一般的悬浮窗都有返回顶部的功能,现在写一个返回顶部的功能
一 利用锚点返回顶部
<body>
<div id="topAnchor"></div>
<a href="#topAnchor">回到顶部</a>
</body>
但是这种会改变URL的路径所以常用这个方法.
二 改变页面滚动高度
<div class="goTop" >点我返回顶部</div>
$('.goTop').on('click',function(){
//将整个boby,html的页面滚动高度变为0
$('html,body').scrollTop(0);
});
<div class="goTop" >点我返回顶部</div>
document.getElementsByClassName('goTop').onclick = function() {
//将整个boby,html的页面滚动高度变为0
document.body.scrollTop = document.documentElement.scrollTop = 0;
};
将页面的滚动高度变为0