鍍金池/ 問答/HTML/ offset().top獲取的數(shù)值不一樣

offset().top獲取的數(shù)值不一樣

最近做一個官網(wǎng), 在添加動畫效果的過程中碰到一個疑難雜癥, 就是用jquery獲取元素的偏移量($(el).offset().top)的時候新開頁面的時候是一個數(shù)值, 按F5刷新之后頁面還是在原來的位置, 但是他的偏移值卻發(fā)生了變化.

  1. 這是我執(zhí)行動畫的代碼:
var downTop = $(".zxg-download").offset().top;
  var windowTop;
  $(window).scroll(function () {
    windowTop = $(document).scrollTop();
    console.log('downTop--' + downTop + ',' + 'windowTop--' + windowTop);
    if(windowTop >= (downTop - 200)) {
      $(".download-img").animate({left: '0'},2000);
    }
  });
  1. 新開頁面是滾動到指定位置, 打印出來的值是:

clipboard.png

  1. 在當(dāng)前頁面按F5刷新之后, 打印出來的值是:

clipboard.png

  1. 相差了1000像素左右, 影響很大, 這里有需要說明的是我的頭部和底部是通過.load()加載出來的(而且是我在引入上面的js文件之后,直接在頁面的寫的代碼,但是頭部最多200像素,所以應(yīng)該不是這里的問題):
$(function() {
    // 引入頁面公共部分
    $(".header").load("./header.html");
    $(".footer").load("./footer.html");
  })

想問問大家有沒有解決方案! 感謝!!!

回答
編輯回答
墨小羽
  1. 終于找到問題來源了, 果然是頁面加載的問題, 在頁面頂部有一組輪播圖, 我通過判斷屏幕尺寸來動態(tài)獲取圖片資源, 代碼如下:
// 輪播圖動態(tài)選擇圖片
  var items = $('.carousel-inner .item');
  $(window).on('resize',function () {
    var width = $(window).width();
    if(width >= 768) {
      $(items).each(function (index,value) {
        var imgSrc = $(this).data("largeImage");
        $(this).find(".carousel-box").html($('<a href="javascript:;" class="pcImg"></a>').css("backgroundImage","url('"+imgSrc+"')"));
      });
    }else {
      $(items).each(function (index,value) {
        var imgSrc = $(this).data("smallImage");
        $(this).find(".carousel-box").html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>');
      })
    }
  }).trigger('resize');  // 自動觸發(fā)事件
  1. 在設(shè)置樣式時我給pcImg設(shè)置了700px的高度, 圖片加載較慢, 還沒有設(shè)置高度就獲取了動畫元素的偏移量, 所以出錯了;
  2. 我的解決辦法很簡單, 就是在滾動的時候一直去獲取$(".zxg-download").offset().top, 這樣就不會有問題了.
  3. 不知道還有沒有更好的辦法, 比如等到圖片加載出來之后再去執(zhí)行函數(shù), 我用了$(function(){})沒效果, 不知道為什么.
2017年5月21日 07:57