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

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

這是我執(zhí)行動(dòng)畫(huà)的代碼:

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);
    }
  });

新開(kāi)頁(yè)面是滾動(dòng)到指定位置, 打印出來(lái)的值是:

在當(dāng)前頁(yè)面按F5刷新之后, 打印出來(lái)的值是:

相差了1000像素左右, 影響很大, 這里有需要說(shuō)明的是我的頭部和底部是通過(guò).load()加載出來(lái)的(而且是我在引入上面的js文件之后,直接在頁(yè)面的寫(xiě)的代碼,但是頭部最多200像素,所以應(yīng)該不是這里的問(wèn)題):

$(function() {
    // 引入頁(yè)面公共部分
    $(".header").load("./header.html");
    $(".footer").load("./footer.html");
  })

想問(wèn)問(wèn)大家有沒(méi)有解決方案! 感謝!!!

回答

編輯回答

墨小羽

終于找到問(wèn)題來(lái)源了, 果然是頁(yè)面加載的問(wèn)題, 在頁(yè)面頂部有一組輪播圖, 我通過(guò)判斷屏幕尺寸來(lái)動(dòng)態(tài)獲取圖片資源, 代碼如下:

// 輪播圖動(dòng)態(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');  // 自動(dòng)觸發(fā)事件

在設(shè)置樣式時(shí)我給pcImg設(shè)置了700px的高度, 圖片加載較慢, 還沒(méi)有設(shè)置高度就獲取了動(dòng)畫(huà)元素的偏移量, 所以出錯(cuò)了;
我的解決辦法很簡(jiǎn)單, 就是在滾動(dòng)的時(shí)候一直去獲取$(".zxg-download").offset().top, 這樣就不會(huì)有問(wèn)題了.
不知道還有沒(méi)有更好的辦法, 比如等到圖片加載出來(lái)之后再去執(zhí)行函數(shù), 我用了$(function(){})沒(méi)效果, 不知道為什么.

2017年5月21日 07:57