寫jQuery更優秀 - 組合邏輯

我已經寫了一個簡單的腳本，工作正常。寫jQuery更優秀 - 組合邏輯

var mywindow = $(window); 
var mypos = mywindow.scrollTop(); 
var up = false; 
var uiscroll; 
mywindow.scroll(function() { 
uiscroll = mywindow.scrollTop(); 
if (uiscroll > mypos && !up) { 

$('div').addClass('down'); 
    up = !up; 
    console.log(up); 
} else if(uiscroll < mypos && up) { 

$('div').removeClass('down'); 
    up = !up; 
} 
mypos = uiscroll; 

if (mywindow.scrollTop() > 200) { 
    $('div').addClass('test'); 
} 
else { 
    $('div').removeClass('test'); 
} 

});

該腳本根據滾動的三種不同條件將三種不同的css狀態應用於div。向上或向下&滾動離頂部有多遠。

有什麼令我煩惱的是，寫作這件事的方式要比我一起入侵的更好，更有說服力。儘管如此，我還是無法把頭圍住。

只是試圖學會更好地編寫腳本，以便我放在一起不是很可笑。我通過查看例子學到了最好的東西。

感謝任何幫助/指導。

來源

2016-03-04 HackYa

這是我嘗試

var mypos = 0; 
var up = false; 
var $div = $('div'); 
$(window).scroll(function() { 
    var uiscroll = $(this).scrollTop(); 
    if (uiscroll > mypos && !up) { 
     $div.addClass('down'); 
     up = !up; 
    } else if(uiscroll < mypos && up) { 
     $div.removeClass('down'); 
     up = !up; 
    } 
    mypos = uiscroll; 
    $div.toggleClass('test',uiscroll>200); 
});

我刪除了mywindow變種，因爲它是沒有必要的。 mypos可以初始化爲0.

您可以使用$(this)引用滾動處理函數內的窗口。

而不是告訴jQuery多次發現div，告訴它找到一次並將其存儲在jquery對象中。實際上，多次搜索相同的元素非常昂貴/浪費，特別是在多次觸發的滾動事件中。如果您需要多次引用相同的元素，最好將其存儲在一個變量中。

toggleClass('classname',boolean)

只是短手

if(boolean is true) 
    //add class 
else 
    //remove class

的jsfiddle這樣你就可以測試它

https://jsfiddle.net/guanzo/Ldp5b92s/

來源

2016-03-04 03:49:27

謝謝。看起來更簡潔。它只有一個問題。當我閱讀你的代碼時，我認爲它應該可以工作，但事實並非如此。：D – HackYa

呵呵..是的更短的代碼並不總是意味着它更好。我之前在一個jsFiddle中測試過，只是爲了確保我沒有破壞任何東西。另外我的代碼假定文檔已準備就緒。 –

是的，我正要問你同樣的問題。每當我看到一個不會觸發的代碼或錯誤時，我只是添加document.ready來查看是否修復了它。並將document.ready添加到您的代碼使其工作。我從來不明白何時需要document.ready。我知道js在繪製html元素之前無法觸發。但我真的不明白這一部分。「我的代碼假定文檔已準備就緒」 - 我怎樣才能知道這一點，而無需測試您的代碼？ – HackYa

寫jQuery更優秀 - 組合邏輯

回答

相關問題