jQuery的css（）不在條件語句工作

我創建一個簡單的視差滾動縮放圖像到屏幕寬度，設置一個滾動包裝，設置爲所有圖像的縮放高度，並查看scrollTop值使用jQuery的css（）設置圖像的頂部位置。這裏是主要功能：jQuery的css（）不在條件語句工作

function positionSlides() { 
    sT = $(window).scrollTop(); 
    $('div.slide img').each(function(){ 
     wp = $(this).attr('data-waypoint'); 
     if(sT >= wp){ 
      $(this).css({'top' : wp, 'border' : '1px solid red'}); 
      //console.log(sT + ':sT, ' + wp + ':wp'); 
     } 
     else{ 
      $(this).css({'top' : ((wp-sT)/4)+sT, 'border' : '1px solid blue'}); 
     } 
    }); 
}

邊框顏色的設置是爲了測試哪個條件語句正在傳遞。

positionSlides（）通過

$(window).scroll(function(){ 
    positionSlides(); 
});

我的問題叫上滾動時sT >= wp，CSS屬性「頂」沒有設置爲wp值。它被設置爲似乎是else語句所傳遞的最後一個值，這個值稍微小於wp。但同時，'border' : '1px solid red'通過相同的if語句正確設置。

爲什麼'top'屬性沒有在聲明的if部分中設置？

來源

2013-01-15 andypants

'$（window）.scroll（positionSlides）'執行起來有點快 – Ascherer

在這種情況下wp包含了什麼？在else中它是數字，如果它是一個字符串（所有屬性都是字符串）。 –

您是否還需要將'px'附加到css'top'屬性（除非它爲0） – steveax

你wp它不工作這是一個字符串工作的第一次。第二次，當您做wp-sT時，它是一個整數或浮點數。如果您將第一個版本轉換爲數值，它將起作用。

var wp = parseInt($(this).attr('data-waypoint'),10);

來源

2013-01-16 01:02:22

我的猜測是，不知何故wp沒有得到預期的價值 - 沒有太多空間讓其他任何地方出現問題。

您確定wp正在拉動您期望的值嗎？元素的data-waypoint屬性如何設置 - 也許這是罪魁禍首？

如果不是，您能否給我們提供您希望設置的示例值，以及它實際設置的值？

來源

2013-01-15 23:02:42 CodeMoose

因此我將這些值記錄到控制檯。 'wp'設置正確，並通過'attr（）'正確拉取。會發生什麼情況是，在滾動經過該航點後，top屬性的值未設置爲「wp」的值，if部分爲'sT> = wp'。 – andypants

任何方式你可以堅持這個在一個小提琴給我們一些示例html？玩這個遊戲要比回答我們愚蠢的問題容易得多=） – CodeMoose

Kevin B在我的問題的評論中回答了這個問題。等待他添加他的答案。謝謝穆斯。 – andypants

你的問題是，你在每一個滾動事件觸發這個。這是很多。請在HTML5Rocks.com上查看this article。它基本上建議每次使用requestAnimationFrame()並檢查位置，而不是在滾動事件上進行。

在你的情況，你可以只改變你的代碼，以

requestAnimationFrame(positionSlides);

來源

2013-01-15 23:02:43 idrumgood

jQuery的css（）不在條件語句工作

回答

相關問題