スクロールでnavからfooterの間のみで表示されるアンカーリンクをjQueryで作成したいです。
途中まで作成したのですが、上スクロールをした際にnavで消えないので、どなたかご教授お願いします。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <div class="wrapper"> <ul class="nav"> <li><a href="">ナビ</a></li> <li><a href="">ナビ</a></li> <li><a href="">ナビ</a></li> </ul> <div class="maincontets"> メインコンテンツ </div> <div class="footer"> フッター </div> <div class="pagetop">トップへもどる</div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </body> </html>
css
* { margin: 0; padding: 0; } .maincontets { height: 5000px; background-color: #eee; } .nav { margin-top:700px; background-color: #ddd; } .footer { background-color: #ccc; height: 300px; } .pagetop { display: none; position: fixed; bottom: 10%; margin-top: -30px; right: 10px; }
jQuery
$(window).scroll(function(){ var navTop = $(".nav").offset().top; var footerTop = $(".footer").offset().top; var scrollPosition = $(window).height() + $(window).scrollTop(); if( scrollPosition < (footerTop-navTop)) { $(".pagetop").fadeIn(); }else { $(".pagetop").fadeOut(); } });
回答1件
あなたの回答
tips
プレビュー