淡入/淡出div scrollTop

我有一個浮動菜單，當您開始向下滾動頁面時，我想淡入淡出，然後在返回頁面頂部時淡出。我沒有淡入淡出，但我不知道如何添加淡入淡出。任何幫助讚賞。謝謝。淡入/淡出div scrollTop

$(document).scroll(function() { 
    $('#floatingnav').toggle($(this).scrollTop()>250) 
});

CSS

#floatingnav { 
    position:fixed; 
    display:none; 
}

來源

2013-05-13 boontoony

分享你的小提琴... – PraJen 2013-05-13 06:40:04

您可以使用fadeToggle一些時間作爲參數（只是櫃面你想要的），而不是平面toggle.That會做你的工作。

$(document).scroll(function() { 
    $('#floatingnav').fadeToggle($(this).scrollTop()>250) 
});

來源

2013-05-13 07:46:42

你可以試試這個測試是否div已經達到頂部

$(window).scroll(function() { 
    var d = $('div'); // this is your fixed div 
    if (d.offset().top > 250) { 
     d.fadeIn(); 
    } else { 
     d.stop().fadeOut(); 
    } 
});

TEST FIDDLE

來源

2013-05-13 09:14:20 Spokey

謝謝，我已經嘗試了上面的，但是代碼在滾動後淡入，但當您向上滾動時，它仍然在那裏。我沒有使用CSS類邊距頂部，但底部：40px;等這有什麼關係呢？ – boontoony 2013-05-14 06:04:38

它可能不會低於頂部250px。否則您可能需要計算它。或使用[航點插件]（http://imakewebthings.com/jquery-waypoints/#about） – Spokey 2013-05-14 21:11:17

$(window).bind("scroll", function() { 
    if ($(this).scrollTop() > 250) { 
     $("#floatingnav").fadeIn(); 
    } else { 
     $("#floatingnav").stop().fadeOut(); 
    } 
});

來源

2013-05-16 03:52:43 boontoony

淡入/淡出div scrollTop

回答

相關問題