jquery - 通過滾動位置動畫工作相同的窗口調整大小

Question

嘿，我有這個非常惱人的問題，這可能有一個簡單的解決方案，但對於我的生活，我無法找到解決它。

基本上我有兩個圖像都是50％的容器現在的目標是兩個圖像在滾動位置的基礎上（左/右）滑動，一旦它到達容器的頂部兩個圖像將坐下的地方。

現在我得到了那個工作，唯一的問題是當我調整頁面的大小時，兩個圖像的位置都是錯誤的。我顯然做了一個resize（）函數與scroll（）函數相同的邏輯，但我仍然無處可去。這裏是我的代碼

var page_width = $(document).outerWidth(), 
      page_height = $(document).outerHeight(), 
      left_image = $('.split-screen.youth'), 
      right_image = $('.split-screen.elite'), 
      offset  = (page_width)/page_height; 

     left_image.css({'left':'0px'}); 
     right_image.css({'right':'0px'}); 

     $(window).on('scroll', null, function(){ 
      var scrollTop = $(window).scrollTop(), 
       calc  = -(scrollTop*offset); 

      left_image.css({ 
       'margin-left': 'calc(100% + '+calc+'px)' 

      }); 

      right_image.css({ 
       'margin-right': 'calc(100% + '+calc+'px)' 
      }); 
     }); 

     $(window).resize(function(){ 
      // something ??? 
     }); 

這是一個jsFiddle的問題，雖然它看起來不完全準確，但你得到的圖片。當您調整滾動位置更改的大小時，我需要保證金左側/保證金右側的值是正確的。

Answer 1

我認爲你的問題是你仍然使用舊的偏移值。只要先更新您的全局值，比它爲我工作（見：https://jsfiddle.net/a7tfmp37/2/）：

$(window).resize(function(){ 
    page_width = $(document).outerWidth(), 
    page_height = $(document).outerHeight(), 
    offset  = (page_width)/page_height; 
    var scrollTop = $(window).scrollTop(), 
     calc  = -(scrollTop*offset); 
    left_image.css({ 
     'margin-left': 'calc(100% + '+calc+'px)' 

    }); 

    right_image.css({ 
     'margin-right': 'calc(100% + '+calc+'px)' 
    }); 
});