我可以根據返回的URL來修改Jquery以使用條件語句嗎？

我有一個網站，使用不同的頁面模板，並調用jQuery來粘貼滾動過去一定數量的像素的網站標題。這個粘性類在帶有固定橫幅的頁面模板上完美地工作，但是在沒有包含橫幅的位置上，我想更改滾動函數被調用的位置。例如，出現在250而不是500像素。我可以根據返回的URL來修改Jquery以使用條件語句嗎？

腳本在WordPress網站，與_s和sass建造，引述如下：基於URL

$(window).scroll(function() { 
    var sticky = $('.site-header'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 500) sticky.addClass('sticky-header'); 

    else sticky.removeClass('sticky-header');  
});

我能想到的解決方案，二者是）使條件語句來觸發不同的滾動位置選擇器b）創建第二個頭div類（.site-header-2）和另一個隻影響該類的jquery文檔。

第二個我可以做，雖然如果我要創建多個頁面模板，並且所有頁面的固定滾動高度不同，它會更不雅觀和耗時。

在上面的腳本中使用語法，是否有一個簡單的解決方案來使用條件參數，用於根據頁面URL結構或其他方式實現我不知道的固定滾動位置？

來源

2016-02-07 Xione

聲明一個變量，當你添加一個橫幅，當這個變量存在條件a，否則條件b –

檢查你的旗幟元素的存在，並設置滾動起始點相應

// within document.ready 
var isBannerPage = $('#bannerId').length;// adjust selector to fit actual 
var scrollStart = isBannerPage ? 500 : 250; 
//cache element outside event handler to avoid searching many times a second for same element 
var sticky = $('.site-header'); 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= scrollStart) sticky.addClass('sticky-header'); 

    else sticky.removeClass('sticky-header');  
});

來源

2016-02-07 11:36:53 charlietfl

太好了，謝謝。似乎工作，也讓我更好地理解什麼可以實現。 – Xione

我認爲解決這個最簡單的方法要麼只是用不同類別條件語句，像

var threshold = 0; 
if ($(.site-header).length > 0) 
{ 
    threshold = 500; 
} 
else threshold = <something else>

但理想情況下，您不必關心硬編碼值，如「500」。您可能希望在滾動頁面通過時使標題變得粘稠，對嗎？在這種情況下，您可以動態設置threshold，如$('site-header').offset().top。

來源

2016-02-07 11:38:38 xiix

謝謝，我會考慮實施動態解決方案，因爲我認爲這將是一個很好的長期任務。 – Xione

一般而言，它是很容易的。比手動檢查尺寸更容易。我不記得細節和差異，但jQuery提供了$（element）.position（）和$（element）.offset（），它們可以使用位置數據。 – xiix

我可以根據返回的URL來修改Jquery以使用條件語句嗎？

回答

相關問題