jQueryのトップへ戻る+スティッキーフロート+スクロールでのフェードイン

Question

私は現在、多くのコンテンツを持つページの「トップに戻る」ボタンにjQuery Stickyfloatを使用しています。しかし、これは完璧に機能しますが、ユーザーがページにアクセスするとリンクが上部に表示されます。ページの読み込み時に非表示にしたいと思います。ユーザーがスクロールすると（約400ピクセル）スクロールバーが表示され、スティッキーフローが開始されます。ユーザーがページまでスクロールバックすると、リンクは消えます。

のjQuery：

$('a#back-to-top').stickyfloat({duration: 150}); 

HTML：

<div id="content"> 
    // Content goes here 
    <a href="#top" id="back-to-top">Top</a> 
</div> 

リンクがメインのコンテンツのdivに絶対的に配置されています。 CSS：

#content { 
    position: relative; 
} 

a#back-to-top { 
    position: absolute; 
    top:0; 
    right:0; 
} 

どうすればいいですか？

Answer 1

最初にCSSを使用して浮動要素を非表示にしたいとします。おそらく通常のようにスティッキーフローを初期化することができます。次に、スクロールされる要素のスクロールイベントにハンドラをアタッチします（BODY、DIV ..）。

ハンドラで、要素のscrollTopを確認します。希望の高さに達すると、フローティング要素をフェードインします。

それを隠すための逆も同様です。

.floating-element 
{ 
    display:none 
} 

$('el').scroll(function(e){ 
    // check target.scrollTop... 
    // fade in target 
})