이 글에서는 주로 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>
관련 권장 사항:
Fullpage .js 고정 네비게이션 바 - 포지셔닝 네비게이션 바_javascript 기술 구현
백엔드 포지셔닝 - 클라우드에서 포지셔닝 및 네비게이션 기능을 구현하려면 PHP 또는 Java를 사용해야 합니까?
위 내용은 위치 지정 및 탐색 효과를 달성하기 위한 jQuery 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!