然後偏移addclass到div的

我的問題是關於使用.offset（）找到瀏覽器的y位置和在一個點上我想補充類我的div 我要像yourkarma.com創造的東西（看看什麼是POWERING IT部分）然後偏移addclass到div的

$(document).ready(function() { 
    $(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var z = '150'; 
    var x = $('#thisdiv').offset().top - z; 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= x) { 
     // if so, ad the fixed class 
     $('#thisdiv').addClass('red'); 
    } 
    }); 
})

我在正確的方式嗎？我覺得使用z = 150並減去它是一種廉價的方式。無論如何要做出更好的？

來源

2013-03-13 Budi Tanrim

這並不便宜，但也許更清晰，有效的方法是：

var $thisdiv = $('#thisdiv'); 
var thisdiv_top = $thisdiv.offset().top - 150; 
var thisdiv_flag = false; 

$(window).scroll(function (event) { 
    if(thisdiv_flag) return; 

    // what the y position of the scroll is 
    var y = $(window).scrollTop(); 

    // whether that's below the form 
    if (y >= thisdiv_top) { 
     // if so, ad the fixed class 
     $thisdiv.addClass('red'); 
     thisdiv_flag = true; 
    } 
});

我不知道是什麼原因-150。我想是這樣，它會觸發一點之前元素在視圖中。但是這個代碼更有效一些。它緩存div的jQuery對象並設置一個標誌，這樣事件不會再次觸發。它也不需要每次用戶滾動時都進行相同的偏移計算。

希望這會有所幫助。

來源

2013-03-14 02:35:02 shrimpwagon

你好，感謝您的答案，如果（假）種布爾？我從來沒有見過它。是的，沒有150，我必須等待瀏覽器的頂部觸摸該元素本身。 – 2013-03-14 02:57:55

爲什麼這樣更好？我很確定我的代碼可以防止事件觸發兩次，不是嗎？ – 2013-03-14 04:53:32

在原始代碼中添加'console.log（'test'）;'在$（'＃thisdiv'）。下方的addClass（'red'）;'，您將看到它會在您向上滾動時執行多次下。你的代碼應該可以工作，但是效率不高，因爲你應該緩存div的jQuery對象，並且你不需要每次用戶滾動時計算div偏移量，因爲它每次都是相同的值。 – shrimpwagon 2013-03-14 13:37:32

然後偏移addclass到div的

回答

相關問題