以下のように600px以上スクロール時に「hoge」という固定フロートメニューを表示し
内部のリンクをクリックするとページ下部「hoge-anchor」要素へページ内遷移します。
lang
1<div class="hoge"><a href="#hoge-anchor">「hoge-anchor」へ</div></div> 2
lang
1$(function() { 2 var header = $('.hoge'); 3 header.css('top', '-150px'); 4 var showFlag = false; 5 6 //-----[header-min] 7 $(this).scroll(function () { 8 if ($(this).scrollTop() > 600) { 9 if (showFlag == false) { 10 showFlag = true; 11 header.stop().animate({'top' : '0'}); 12 } 13 } else { 14 if (showFlag) { 15 showFlag = false; 16 header.stop().animate({'top' : '-150px'}); 17 } 18 } 19 }); 20 }); 21
確認したい内容は、リンクをクリックすると「hoge」を非表示(top:-150px)にする方法です。
クリックイベントで実現することは分かるのですが、「hoge-anchor」が600px以下にあるので上記スクロール処理とのバッティングでうまく動作しませんでした。
またその他要望としては、一旦非表示になっても再スクロール時の現在地が600px以上のエリアであれば再度「hoge」を出現させたいです。
ご教授の程よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/31 02:18
2015/11/01 02:10