2017-07-19 10 views
1

アンカースクロールの制御にjquery-smooth-scrollを使用しています。スクロール後の動作を決定する機能/オプションがあります。下のアンカーに移動した後、ボタンを非表示にしました。私はその後、スクロールがページの最下部に100%なくなったときにそのボタンを戻すためにjqueryを実装しました。スクロールが100%のときスクロールボトムボタンの動作

私がしなければならないことは、スクロールが100%ダウンしているときにボタンが常に消えることを確認することです。私の場合は、標準的なトップ・トゥ・トップが動作しますが、ページの両端が同じように動作します。

私は上記一緒https://jsfiddle.net/k253jvt8/

/* show and hide button*/ 
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) { 

    if (document.body.scrollTop == 0) { 
    $('.saveForm').fadeIn(); 
    //below isnt working to fade away .saveform when scroll is 100% bottom 
    } else { 
    $('.saveForm').fadeOut(); 
    } 
}); 

を入れている私はそれが消えた後、ボタンを戻すために使用するコードは、このフィドルを見たが、その後カントを手動で一番下までスクロールすると、それはもう消えて取得してくださいそれは私が下に行くためにボタンを使用するときに再び消えます - 私のフィドルとの遊びを持って、あなたは私が意味するものを見るでしょう。

+0

あなたのfadeIn()もうまくいかないようです!私は関数内のif-else全体をコメントアウトしたので、常に表示されます。 –

+0

ボタンをクリックしてスクロールした後にフェードインが機能します。スクロールアップを開始すると、フェードインします –

+0

また、ボトムに100%の場合はボタンが消えてしまいます。スクロールバーが100%下になければ、時間の99%がそこにとどまるはずです –

答えて

0

あなたのフィドルでは、あなたのラッピング<div class="reportFormPage">は、ドキュメントに対して絶対的に配置されています。

結果、あなたの<body>要素は、高さを決定する際に考慮しません。したがって、常に高さの値は0です。このため、 'else'条件は決して発生しません。

CSSルールを削除すると、この問題が解決されます。

+0

絶対のスクロールを削除することによって、ページの上部にあり、底がなくなったときにボタンが消えなくなる –

+0

基本的には、ページの下部に表示されていない限り、いつ下に隠れるか。私はボタンをクリックした後でしかできません。私は手動で下にスクロールするときに動作する必要があります –

+0

https://jsfiddle.net/bnxzy9kb/ OKこれは私を近づけますが、ページの一番下に100%がなければ常にそこにとどまるボタンが必要ですか? –

0

dommmmとしてposition:absoluteを削除するとともに、この

if ($(window).scrollTop() ==0) { 
    $('.saveForm').fadeIn(); 
    } else if($(window).scrollTop() < $(document).height()) { 
    $('.saveForm').fadeOut(); 
    } 
}); 

を試してみては述べています。ここで

は作業フィドル https://jsfiddle.net/sd6sh4v6/2/

あなたは私が何-jsの代替使用しないで、あなたのsmoothScrollにもたらさ変更を好きかどうかを確認しています。

+0

これは機能しません。スムーズスクロールは機能しなくなりました。あなたのフィドルでボタンをクリックすると、それは消えますが、下にスクロールしません。 –

+0

私は自分の答えを更新しました。あなたの 'smoothScroll'に関連するクリーンアップに起因する不便をおかけして申し訳ありません。 –

+0

ありがとう、心配しないでください。残念ながら私は使用した滑らかなスクロールと使用されたクラスの絶対を必要とします –

関連する問題