浮动窗口-固定窗口-css实现窗口浮动-jq浮动窗口-三种方法

最新推荐文章于 2024-05-24 16:08:13 发布

weixin_34111790

最新推荐文章于 2024-05-24 16:08:13 发布

阅读量893

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/parchments/blog/656114

版权

2019独角兽企业重金招聘Python工程师标准>>>

方法一：纯css样式直接控制，滚动时固定不动

css

#di_float{width:100px;height:150px;border:1px solid #f00;position:fixed;
right:0;top:100px;background:#DBEAF9;}

html

<div id="di_float"></div>

方法二：css+js控制，滚动时固定不动

css

#di_float{width:100px;height:150px;border:1px solid #f00;position:fixed;right:0;
top:100px;background:#DBEAF9;_position:absolute;
    _top:expression(documentElement.scrollTop+100)}

html

<div id="di_float"></div>

方法三：jq控制，滚动时来回跳动最后--固定不动

css

#di_float{width:100px;height:150px;border:1px solid #f00;position:absolute;right:0;
top:100px;background:#DBEAF9;}

html

<div id="di_float"></div>

js

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
   $(window).scroll(function(){
      var oldT = 100;
      var T = $("body").scrollTop();
      T = T + oldT + "px";
      setTimeout(function(){$("#di_float").css("top",T);},200);
   })
})
</script>

//本文来源于网络，本人总结起来并优化，分享给有需要的前端朋友，如有侵权，请联系删除，也请指正、批评

转载于:https://my.oschina.net/parchments/blog/656114