基於滾動位置顯示/隱藏子標題

問題：我想完成以下動畫：當頁面在移動設備中加載時，我想顯示ID爲「sub-header」的div，但只要用戶滾動超過50px的頁面我想要隱藏子標題。頁面隱藏菜單，但是當我向上滾動，它顯示和隱藏多：最後，如果用戶向上滾動60像素，而隨時在頁面上我想子頭.show基於滾動位置顯示/隱藏子標題

我所用下面的代碼看我停止滾動後的時間。

JQuery的：

var newScroll = 0; var subHeaderPosition = true; var currentScroll = 0; $(window).scroll(function() { currentScroll = $(window).scrollTop(); if ($(window).width() < 779) { if (currentScroll > 50 && subHeaderPosition) { console.log("Current Scroll position: " + currentScroll); console.log("Scroll should hide"); $("#sub-header").hide(300); subHeaderPosition = false; newScroll = $(window).scrollTop(); console.log("New Scroll position: " + newScroll); } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) { console.log("Scroll position: " + currentScroll); console.log("Scroll should show Sub-Header"); $("#sub-header").show(300); subHeaderPosition = true; newScroll = $(window).scrollTop(); } else { newScroll = $(window).scrollTop(); } } });

UPDATE：增加了更多的日誌後，我現在可以告訴大家，我的newscroll和currentscroll總是碰得指向我朝着正確的方向相同的號碼。一旦我擁有了它，我會發佈一個解決方案，或者如果有人知道它，我就會全神貫注。

來源

2016-11-28 Denoteone

你可以使用這個固定的問題

$(function(){ 

$(window).on('scroll', function(){ 

    if($(window).scrollTop() >= 50){ 
    $('header').addClass('hide'); 
} 
else if($(window).scrollTop() <= 60){ 
    $('header').removeClass('hide'); 
} 

}); 

});

https://jsfiddle.net/qummetov_/3hf1e350/

來源

2016-11-28 19:44:49

不幸的是，我想要「標題顯示，如果用戶開始向上滾動不只是當他們到達頁面的頂部。 – Denoteone

我想有一個與隱藏/顯示時間參數的問題。正因爲如此，雖然隱藏行動可以完成，但滾動實際上是異步執行的。

結帳jsfiddle。

我正在用canShowHeader變量檢查此相關性。對我來說，我運行一個假的setTimeout，但您可以使用原來的jquery hide/show case：

例子：

$("#book").show(300, function() { 
    canShowHeader = false; 
});

和

$("#book").hide(300, function() { 
    canShowHeader = true; 
});

希望它可以幫助...

來源

2016-11-28 19:55:27

我正在考慮使用addClass和removeClass，就像@НиязиГумметов所說的那樣，因爲你只能刪除和添加一個類。

事情是這樣的：

var newScroll = 0; 

var subHeaderPosition = true; 

var currentScroll = 0; 

$(window).scroll(function() { 

    currentScroll = $(window).scrollTop(); 


    if (currentScroll > 50 && subHeaderPosition) { 

    console.log("Current Scroll position: " + currentScroll); 

    console.log("Scroll should hide"); 

    $("#sub-header").removeClass("show"); 
    $("#sub-header").addClass("hide"); 

    subHeaderPosition = false; 

    newScroll = $(window).scrollTop(); 

    console.log("New Scroll position: " + newScroll); 

    } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) { 

    console.log("Scroll position: " + currentScroll); 

    console.log("Scroll should show Sub-Header"); 

    $("#sub-header").addClass("show"); 


    subHeaderPosition = true; 

    newScroll = $(window).scrollTop(); 

    } else { 

    newScroll = $(window).scrollTop(); 
    } 


});

#sub-header { 
    margin-top: 500px; 
    transition: all .3s; 
    opacity: 1; 
    visibility: visible; 
} 
.hide { 
    opacity: 0; 
    visibility: hidden; 
} 
.show { 
    opacity: 1 !important; 
    visibility: visible !important; 
}

或者只是提取Underscore Throttle提到nicholaides。

來源

2016-11-28 20:57:11

基於滾動位置顯示/隱藏子標題

回答

相關問題