悬浮窗的解决方法

悬浮窗在很多网页里面都有使用,在小风车这里曾经也使用过.现在把遇到的悬浮窗问题都总结在本文.

一简单固定定位的悬浮窗

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

悬浮窗的解决方法

猜你喜欢