admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:3724回复:0

jquery 固定div在网页顶部

楼主#
更多 发布于:2013-07-13 23:26
分享到:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
   <script type="text/javascript">
       $(function() {
           //获取要定位元素距离浏览器顶部的距离
           var navH = $(".hb").offset().top;
           //滚动条事件
           $(window).scroll(function() {
               //获取滚动条的滑动距离
               var scroH = $(this).scrollTop();
               //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
               if (scroH >= navH) {
                   $(".hb").css({ "position": "fixed", "top": 100 });
               }
               else if (scroH < navH) {
                   $(".hb").css({ "position": "static" });
               }
           })
       })
</script>
</head>
<body>
   <div style=" height: 300px;">
       空div</div>
   <div class="hb" style="height: 100px; width: 100%; background: #999">
       移动到顶部固定不变</div>
   <div style="background: #ccc; height: 1500px;">
       空div</div>
</body>
</html>
游客

返回顶部