如何切換粘貼標題？

下面的代碼會生成一個粘性標題，它會在您向下滾動100px後顯示出來。一旦我到達頁面的較低部分，如何關閉粘性標題？可以說800px？如何切換粘貼標題？

謝謝！

$(window).scroll(function() { 
if ($(this).scrollTop() > 100){ 
    $('header').addClass("sticky"); 
    } 

    else{ 
    $('header').removeClass("sticky"); 
    } 
})

來源

2016-04-25 AndrewLeonardi

你的意思是這樣嗎？

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100 && $(this).scrollTop() < 800) { 
     $('header').addClass("sticky"); 
    } else{ 
     $('header').removeClass("sticky"); 
    } 
})

來源

2016-04-25 23:27:18 Gerfried

爲了方便使用，我會將'$（this）.scrollTop（）'緩存在一個變量中。 –

這是完美的！謝謝！ – AndrewLeonardi

您可以添加它的頁面獲取在另一個條件800像素：

$(window).scroll(function() { 
    if (($(this).scrollTop() > 100) && ($(this).scrollTop() < 800)){ 
     $('header').addClass("sticky"); 
    } 
    else{ 
     $('header').removeClass("sticky"); 
    } 
});

在我的例子：

$(this).scrollTop()是代表視圖頂部的變量
if statement的第一部分增加了100px添加的條件
if statement的第二部分爲800px刪除添加了條件

來源

2016-04-25 23:27:44

我低調回答這個問題，因爲它與Gerfried的一個重複。 –

@TiagoMarinho此答案包括對零件的解釋，我們幾乎在同一時間回答了問題。 –

我不同意。從我看到的，你首先回答了另一個解決方案（這是低效的tbh），然後編輯它以匹配Gerfried的答案。無論如何，我的評論是在你添加解釋之前發佈的，所以我將刪除我的downvote。 –

我建議只使用css。如果導航是粘性的，爲什麼不隨時保持粘性，然後向主內容持有者添加邊距以騰出空間用於導航。例如：如果NAV是108px上桌面使用高：

.main-content-holder{ 
    position:relative; 
    display:block; 
    margin-top:108px 
}

然後調節高度和/或位置與媒體的查詢。

來源

2016-04-25 23:39:52

這可能並非總是如此，因爲一旦用戶向下滾動100px，UI可能會有所不同。我相信YouTube的視頻管理器曾經以這種方式工作：一旦用戶滾動過某個點，工具欄變得粘滯。 –

如何切換粘貼標題？

回答

相關問題