Cet article présente principalement en détail l'effet de positionnement et de position de navigation basé sur jQuery et partage le code spécifique pour l'affichage d'images Android Jiugongge, qui a une certaine valeur de référence. J'espère que cela pourra vous aider. .
Lorsque la barre de défilement défile jusqu'à la zone de contenu, la barre de navigation latérale est positionnée sur l'écran et s'arrête de bouger, et cliquez sur la barre de navigation pour accéder à l'emplacement du contenu
<!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>
Recommandations associées :
Utiliser jQuery pour obtenir un effet de barre de navigation fixe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!