Maison > Article > interface Web > Comment implémenter la navigation de positionnement à l'aide de jquery

Comment implémenter la navigation de positionnement à l'aide de jquery

亚连original: 2018-06-14 15:00:021284parcourir

Cet article présente principalement l'effet de jquery pour réaliser la navigation de positionnement d'entreprise

L'exemple de cet article partage le code spécifique de jquery pour réaliser la navigation de positionnement d'entreprise pour votre référence.Le contenu spécifique est le suivant

Le code complet est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.nav{width:100%;position:absolute;top:150px;} 
.nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;} 
.nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;} 
.nav ul li:hover{background:#666;} 
.nav ul li a{color:#000;font-size:18px;text-decoration:none;} 
.nav .active{background:#666;} 
.cont{width:1200px;height:4500px;margin:0 auto;} 
.cont ol{width:1200px;height:4500px;margin:0 auto;} 
.cont ol li{width:1200px;height:500px;list-style:none;} 
.cont ol li p{color:#000;font-size:48px;} 
</style> 
</head> 
<body> 
<p style="height:200px;width:100%;"></p> 
<p class="nav"> 
  <ul> 
    <li class="active">page1</li> 
    <li>page2</li> 
    <li>page3</li> 
    <li>page4</li> 
    <li>page5</li> 
    <li>page6</li> 
    <li>page7</li> 
    <li>page8</li> 
  </ul> 
</p> 
<p class="cont"> 
  <ol> 
    <li style="background:#aaa"><p>page1</p></li> 
    <li style="background:#999"><p>page2</p></li> 
    <li style="background:#666"><p>page3</p></li> 
    <li style="background:#333"><p>page4</p></li> 
    <li style="background:#bbb"><p>page5</p></li> 
    <li style="background:#aaa"><p>page6</p></li> 
    <li style="background:#ccc"><p>page7</p></li> 
    <li style="background:#000"><p>page8</p></li> 
  </ol> 
</p> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript"> 
 
$(".nav ul li").click(function(){ 
    var index=$(this).index(); 
    var i=150+index*501+&#39;px&#39; 
    $("html,body").animate({scrollTop:i},500) 
     
  }) 
   
$(window).scroll(function(){ 
    if($(window).scrollTop()>150){ 
      $(".nav").css({"position":"fixed","top":"0px"}) 
    } 
    else{ 
      $(".nav").css({"position":"absolute","top":"150px"}) 
    } 
 
  for(var x=0;x<8;x++){ 
    var i=150+x*500 
  if($(window).scrollTop()>i && $(window).scrollTop()<i+500){   
    $(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")} 
  } 
 
}) 
</script> 
</body> 
</html>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Utilisation de jQuery pour encapsuler animate.css (tutoriel détaillé)

fichier de configuration vue-cli (tutoriel détaillé)

Comment implémenter l'arborescence JSON à l'aide de Vue2.x

Tutoriel sur l'installation et l'utilisation de CLI dans Angular4

Utiliser JS pour implémenter l'horloge de changement d'image (tutoriel détaillé)

Implémentation de la liaison d'attribut DOM dans Angular4

Comment l'écrire en utilisant la table de multiplication JS

Comment implémenter la liaison d'attribut HTML dans Angular4

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir un effet de pagination en utilisant jquery.page.jsArticle suivant：Comment obtenir un effet de pagination en utilisant jquery.page.js

Articles Liés

Voir plus