脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js页面悬浮框

基于JS实现页面悬浮框的实例代码

 更新时间：2021年12月24日 10:17:49   作者：miaoying  
这篇文章主要介绍了基于JS实现页面悬浮框的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.

当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        display:none;
    }

 
</style>
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 100){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

补充：JavaScript实现右侧悬浮框

HTML代码：

<body>
  <div id="div1">
  </div>
</body>

css代码：

#div1{
    height:150px;
    width:100px;
    background:red;    
    position:absolute;
    right:0px;
    bottom:0px;
}
body{
    height:2000px;
}

javascript代码

//当窗体滚动的时候滴呀
  window.onscroll=function (){
      var obj=document.getElementById("div1");
      //考虑到浏览器的兼容性滴呀(被卷去的高度)
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //浏览器可视区域的高度+物体自身的高度+被卷曲的高度
     // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //move(targetLen);
    //这样我们就完成了基本的人物我滴
    //方式二：结果他是要抖动滴呀
    //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //move(targetLen);
    var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    move(targetLen);
    //这样我们的基本功能算是实现了滴呀
  }
  //这里我们俩加上一个缓冲运动滴呀，这样才方便我们去这些事情滴呀
  var Timer=null;
  function move(iTarget){
      clearInterval(Timer);//先清除
      var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //距离上面物体的距离滴呀
           var speed=(iTarget-obj.offsetTop)/4;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           //先获取我们的速度滴呀
           if(obj.offsetTop==iTarget){
               clearInterval(timer); //到达目的之后，我们就清除元素滴呀
           }else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //来进行我们饿缓冲运动滴呀
  }

到此这篇关于基于JS实现页面悬浮框的实例代码的文章就介绍到这了,更多相关js页面悬浮框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序项目实践之验证码倒计时功能

    微信小程序项目实践之验证码倒计时功能

    这篇文章主要介绍了微信小程序项目实践之验证码倒计时功能,当用户点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字，需要的朋友可以参考下
    2018-07-07
  • js jquery 获取某一元素到浏览器顶端的距离实现方法

    js jquery 获取某一元素到浏览器顶端的距离实现方法

    今天小编就为大家分享一篇js jquery 获取某一元素到浏览器顶端的距离实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用JS手写一个类似 Laravel 验证器的表单验证器

    使用JS手写一个类似 Laravel 验证器的表单验证器

    这篇文章主要为大家介绍了使用JS手写一个类似 Laravel 验证器的表单验证器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • javascript bom是什么及bom和dom的区别

    javascript bom是什么及bom和dom的区别

    BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
    2015-11-11
  • 如何阻止小程序遮罩层下方图层滚动

    如何阻止小程序遮罩层下方图层滚动

    这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 如何用js将blob为pcm格式转换为MP3格式

    如何用js将blob为pcm格式转换为MP3格式

    要将PCM文件转换为MP3文件,您可以使用Js实现,这篇文章主要给大家介绍了关于如何用js将blob为pcm格式转换为MP3格式的相关资料,需要的朋友可以参考下
    2023-11-11
  • uniapp和uniCloud开发中常出现的问题及解决汇总

    uniapp和uniCloud开发中常出现的问题及解决汇总

    使用uni 开发一段时间了,下面这篇文章主要给大家介绍了关于uniapp和uniCloud开发中常出现的问题及解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 通过 Dom 方法提高 innerHTML 性能

    通过 Dom 方法提高 innerHTML 性能

    此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。
    2008-03-03
  • 详解小程序如何动态绑定点击的执行方法

    详解小程序如何动态绑定点击的执行方法

    这篇文章主要介绍了详解小程序如何动态绑定点击的执行方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 微信小程序实现底部弹窗

    微信小程序实现底部弹窗

    这篇文章主要为大家详细介绍了微信小程序实现底部弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论