Comment implémenter la navigation de positionnement à l'aide de jquery-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-14 15:00:02

original

1283 Les gens l'ont consulté

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>

Copier après la connexion

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!