jquery scroll fadeIn footer、ページの一番下に隠す

Question

「より多くの」プロンプトが表示され、ユーザーにプロンプ​​トが表示され、下に内容が多く表示されるフッターがあります。

コンテンツがある場合は、ページが読み込まれるまでスクロールして表示します（スクロールして表示する必要があります）。

スクロールするページの下にコンテンツがなくなると、フェードインしません（すべてのコンテンツがロード時にウィンドウに収まる場合）。これは成功です。

ページの下部にある段落になるとフェードインしないように書いています。だから、あなたが見るためにスクロールダウンする必要のあるコンテンツがある場合は、ページの終わりに来るまでフェードインします（段落 '#last'で示されます）。この部分は動作しません。

アイデアを高く評価します。

HTMLフッター：

<footer id="fixedmore"> 
<p>more</p> 
<div class="downArrow"> 
</div> 
</footer> 

HTML最後の段落

CSS固定フッター

#fixedmore 
{ 
    width:100%; 
    height:30px; 
    left:0px; 
    bottom:0px; 
    position:fixed; 
    color:white; 
    text-align:center; 
    text-shadow:0px 0px 4px rgba(0,0,0,0.5); 
    font-weight:500; 
    font-size:14px; 



    /* fallback/image non-cover color */ 
    background-color:rgba(0,0,0,0.3);  
    /* Safari 4+, Chrome 1-9 */ 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.05)));   
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */ 
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));  
    /* Firefox 3.6+ */ 
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));  
    /* IE 10+ */ 
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));  
    /* Opera 11.10+ */ 
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05)); 

} 

    .downArrow 
    { 
     width:0; 
     height:0; 
     border-left:50px solid transparent; 
     border-right:50px solid transparent; 
     border-top:10px solid white; 
     margin:auto; 
    } 

CSS最後の段落

#last 
{ 
text-align:center; 
font-size:10px; 
} 

jQueryのウィンドウのスクロール

$(window).scroll(function(){ 
    $('#fixedmore').hide(); 
    var distanceTop = $('#last').offset().top - $(window).height(); 
    if ($(window).scrollTop() < distanceTop){ 
     $('#fixedmore').fadeIn(3000); 
    } 

    else{ 
     $('#fixedmore').hide(); 
    };   

}); 

Answer 1

私はあなたが望むものである、あなたはスクロールを開始、ないあなたが停止したときときあなたはそれが火をして見つけることだと思いますが、scrollTopスプライトイベントが発生します。これをテストすることができます。ページの一番下までスクロールして停止し、スクロールして#lastを表示したままにしておくと、＃fixedmoreが非表示になっているはずです。問題は、ほとんどの場合、ユーザーが遠くから#lastにスクロールしているため、起動しないことです。

This plugin James Padolseyは、scrollStartや（もっと重要なのは）scrollEndsのような特殊なスクロールイベントを許可しています。やってみて！