• html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮


    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果。

    传统的fixed实现:

    通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置,通过设置right和bottom,使得div固定在右下角。例如:

    .demo{
        position: fixed;bottom: 10px;right: 10px;
    }

    但是这种实现,从一开始就悬浮在浏览器的右下角了。可以满足我们绝大多数需求,但是有时候会遇到这种情景:当我们浏览器滚动条到某个位置的时候,才触发div悬浮效果。下面将来介绍:

    原生JS实现滚动到一定位置,实现div悬浮

    实现方法是:需要通过js来监听浏览器滚动的距离,当滚动到多少距离的时候,我们来设置div的position参数。具体如下:

    <style>
    *{
     margin: 0;padding: 0;
    }
    body{
     height: 1500px;
    }
    .demo{
     position: relative;left: 10px;top: 10px;z-index:9; 500px;height: 200px;background: #F0AD4E;
    }
    </style>
    //html
    <p style="height: 100px;">测试</p>
    <div class="demo" id="demo">
     内容
    </div>

    js中代码:

    1 function onscroll(distance){//s滚动的距离,offset默认为元素距离顶部的距离    
    2     var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
    3         dom = document.getElementById('demo'),
    4         offset= dom.offsetTop || distance;
    5     dom.style.position=s>offset?"fixed":"relative";
    6 };
    7 window.addEventListener('scroll',onscroll());

    扩展:通过上面的js方法,同样可用实现让div到达多少距离的时候,实现显示或者隐藏, 比如我们需要做返回顶部的功能,当距离达到多少的时候就显示出来,

    1 <a href="javascript:scrollTo(0,0);" id="demo">返回顶部</a>
  • 相关阅读:
    js+分布上传大文件
    java+大文件断点续传
    word粘贴图片到ekitor
    ckeditor从word粘贴图片
    word粘贴图片到ckeitor
    2g 大文件上传
    php+大视频文件上传+进度条
    java+Word图片上传控件
    断点续传管理系统
    富文本编辑器粘贴复制Word
  • 原文地址:https://www.cnblogs.com/ypppt/p/12934579.html
Copyright © 2020-2023  润新知