2014-10-09 45 views
0

我想要做的是在滾動時刪除頁面的<header>。這是我到目前爲止 - jsFiddle滾動時刪除div

而這裏的代碼:

var scrollPoint = $('section').offset().top, 
    scrolledPast = false; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > scrollPoint) { 
    scrolledPast = true; 
    } 

    if ($(window).scrollTop() < scrollPoint && scrolledPast == true) { 
    $(window).scrollTop(scrollPoint); 
    $('header').remove(); 
    $('html, body').animate({scrollTop: 0}, 0); 
    scrolledPast = false; 
    scrollPoint = 0; 
    return false; 
    } 
}); 

基本上,遊客可以正常地向下滾動頁面和<header>被刪除訪問者滾動只有當備份到<section>的頂部。

我留下的唯一問題是當訪問者使用滾動條而不是滾動鼠標滾輪時。如果他正在使用滾動條,在刪除<header>之後,出於顯而易見的原因,一切都會停止。任何想法解決這個問題?

+0

我想你的jsfiddle,並且頭部取出是否使用鼠標滾輪或手動拖拽滾動條,我不認爲有任何區別。這是你的問題嗎? – SuckerForMayhem 2014-10-09 21:56:58

+0

的確,但「頭」是100%的身高。當它被移除後,如果你拿着滾動條,你會立即在屏幕上向下100%。這是我目前的問題。 – fnbd 2014-10-09 22:03:49

+0

啊我現在看到,可能會隱藏標題,而不是刪除它可能有幫助嗎? (編輯:我試過了,結果相同) – SuckerForMayhem 2014-10-10 14:59:58

回答

0

像這樣?

jsFiddle

$(window).on('scroll', function(e) { 
    var a = $(this).scrollTop(), 
     b = $('section').offset().top, 
     c = $(this).data('sp'); 

    if (a >= b) $(this).data('sp', true); 
    if (c && a <= b) { 
     $('header').remove(); 
     $(window).scrollTop(0); 
    } 
}) 
+0

結果仍然和我的一樣 - 使用滾動條滾動會導致頁眉在翻頁後驟降。我目前正在嘗試溢出:隱藏然後回到溢出:自動(即時連續)刪除標題後,但它不能在IE11(只有Chrome/FF),這就是爲什麼我一直在尋找某種一個jQuery黑客。 – fnbd 2014-10-09 22:39:58

+0

嗯,我明白了。我認爲我有它的工作,但它是因爲我釋放鼠標。問題是,當你仍然握住指針,滾動跳到你的鼠標所在的位置 – SpYk3HH 2014-10-10 19:54:14

+0

我願意接受任何想法。 – fnbd 2014-10-10 19:57:28