In diesem Artikel werden hauptsächlich die auf jQuery basierenden Positionierungs- und Navigationspositionseffekte vorgestellt und der spezifische Code für die Bildanzeige von Android Jiugongge vorgestellt. Interessierte Freunde können darauf verweisen. .
Wenn die Bildlaufleiste zum Inhaltsbereich scrollt, wird die seitliche Navigationsleiste auf dem Bildschirm positioniert und stoppt ihre Bewegung. Klicken Sie auf die Navigationsleiste, um zur Position des Inhalts zu springen 🎜>
Verwandte Empfehlungen:
<!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 Feste Navigationsleiste – Positionierungsnavigationsleiste implementieren_Javascript-Fähigkeiten
Backend-Positionierung – Sollte ich PHP oder Java verwenden, um die Positionierungs- und Navigationsfunktion in der Cloud zu implementieren?
Verwenden von jQuery, um einen festen Navigationsleisteneffekt zu erzielen
Das obige ist der detaillierte Inhalt vonÜber jQuery, um Positionierungs- und Navigationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!