嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-06-04 2681 次浏览 标签 : javascript

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

html代码:

<div class="banner" >
  <img src="images/1.jpg" alt="" >
</div>
<div class="nav">
  <ul>
    <li><a href="#">活动流程</a></li>
    <li><a href="#">现 场</a></li>
    <li><a href="#">观 点</a></li>
    <li><a href="#">评 论</a></li>
    <div class="clear"></div>
  </ul>
</div>

js代码:

$(function(){
  //导航定位
  var bannerHeight=$('.banner').height();
  console.log(bannerHeight);
  $(window).scroll(function(){
    var scrollTop=$(window).scrollTop();
    if(bannerHeight>scrollTop){
      $('.nav').css({'position':'static'})
    }else{
      $('.nav').css({'position':'fixed','top':'0','z-index':'9999'})
    }
  })
})

发现控制台在输出console.log(bannerHeight)的时候,我狂刷新页面的时候,在firefox里OK,但是在chrome里面是一会输出0,一会输出608(608是里面图片的高度)。最开始因为jquery版本的问题,更换为最新的版本之后,的确chrome表现正常,但是在safari里面还是同样的问题。

分析应该是各个浏览器的加载的机制。有时候jquery执行的时候div加载了,但是图片还没载入进来,获取的是div现有的高度0,有时候图片又加载进来了,所以是608。

最后,解决办法就是给那个div或者那个图片给定一个高度,这样就不会有问题了。

<div class="banner" >
  <img src="images/1.jpg" alt="" style="height:608px;" >
</div>

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表