固定某个对象不随滚动条

Admin | 2016-5-16 11:24:41 | 被阅次数 | 3684

温馨提示!

如果未能解决您的问题，请点击搜索；登陆可复制文章，点击登陆

　　如何让某个对象在滚动滚动条的时候，该对象始终显示在界面中，而不随着滚动条的滚动而消失，就像固定导航栏显示在顶部一样。网络上很多地方都讲过此效果，但是说的都不清楚，并且使用的冗余代码很多，应用起来比较繁杂，所以，本文在此，给大家介绍最简单的效果最好的一个例子。

　　一、首先引入JS库

　　二、页面对象

　　这里是DIV内容

</div>

　　三、JS代码

　　<script type='text/javascript' >
　　var MyTop = !1;
　　var MyLeft = 0;
　　$(window).bind("scroll",function()
　　{
　　    var MyScrollTop = $(document).scrollTop();//往下滚的高度
　　    MyTop = MyTop ? MyTop: $("#MyShowCanvas").offset().top;
　　    MyLeft=$("#MyShowCanvas").offset().left;
　　 var sel=$("#MyShowCanvas");
　　 if (MyTop < MyScrollTop)
　　 {
　　      sel.css("position","fixed");
　　      sel.css("left", MyLeft + "px");
　　      sel.css("top",0 + "px");
　　 }
   　　 else
　　 {
　　      sel.css("position","");
　　      sel.css("left","");
   　　     sel.css("top","");
　　   }
　　});
　　</script>