この記事では主にjQueryに基づく位置決めとナビゲーション位置効果を詳しく紹介し、Android Jiugongge画像表示のための特定のコードを共有します。興味のある友人が参考になれば幸いです。
スクロール バーがコンテンツ領域までスクロールすると、サイド ナビゲーション バーが画面上に配置され、動きが停止し、ナビゲーション バーをクリックしてコンテンツの場所にジャンプします
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{ padding: 0; margin: 0; } .left{ float: left; padding: 0 0 328px 0; } .left p{ width: 800px; height: 300px; line-height: 300px; text-align: center; font-size: 30px; background: gray; margin: 10px 0; } .nav{ position: absolute; right:20px; top: 20px; } .nav p{ width: 100px; height: 80px; line-height: 80px; text-align: center; background: pink; margin: 10px 0; cursor: pointer; } .bottom{ overflow: hidden; width: 100%; position: relative; } </style> <title>Document</title> </head> <body> <img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt=""> <p class="bottom"> <p class="left"> <p class="one leftp" id="one"> 一 </p> <p class="conOne leftp" id="two"> 二 </p> <p class="leftp" id="three "> 三 </p> <p class="leftp" id="four"> 四 </p> </p> <p class="nav"> <p class="one navp">one</p> <p class="two navp">two</p> <p class="three navp">three</p> <p class="four navp">four</p> </p> </p> <script src="jquery.js"></script> <script> $(window).scroll(function(e){ console.log($(window).scrollTop()); if ($(window).scrollTop() >$('#one').offset().top) { $('.nav').css({'position':'fixed'}); console.log('ss'); } else{ $('.nav').css({'position':'absolute'}); } }) $('.nav p').click(function(){ var i = $('.navp').index(this); var x = $('.leftp').eq(i).offset().top; $('html, body').animate({scrollTop:x+'px'},500); }) </script> </body> </html>
関連する推奨事項:
フルページ .js 固定ナビゲーション バー - 位置決めナビゲーション bar_javascript スキルを実装する
バックエンド位置決め - クラウドに位置決めとナビゲーション機能を実装するには、php または java を使用する必要がありますか?
jQueryを使用して固定ナビゲーションバー効果を実現します
以上が位置決めとナビゲーション効果を実現するための jQuery についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。