suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Positionierungsnavigation mithilfe von JQuery

So implementieren Sie die Positionierungsnavigation mithilfe von JQuery

亚连
亚连Original
2018-06-14 15:00:021333Durchsuche

In diesem Artikel wird hauptsächlich die Wirkung von JQuery zur Realisierung der Unternehmenspositionierungsnavigation vorgestellt

Das Beispiel dieses Artikels teilt den spezifischen Code von JQuery zur Realisierung der Unternehmenspositionierungsnavigation als Referenz. Der spezifische Inhalt lautet wie folgt:

Der vollständige Code lautet wie folgt: 

<!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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von jQuery zum Kapseln von animate.css (ausführliches Tutorial)

vue-cli-Konfigurationsdatei (ausführliches Tutorial)

So implementieren Sie einen JSON-Baum mit Vue2.x

Tutorial zur Installation und Verwendung von CLI in Angular4

Verwenden von JS zum Implementieren der Bildwechseluhr (ausführliches Tutorial)

Implementieren der DOM-Attributbindung in Angular4

Wie man es schreibt unter Verwendung der JS-Multiplikationstabelle

So implementieren Sie die HTML-Attributbindung in Angular4

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Positionierungsnavigation mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erzielen Sie einen Paging-Effekt mit jquery.page.jsNächster Artikel：So erzielen Sie einen Paging-Effekt mit jquery.page.js

In Verbindung stehende Artikel

Mehr sehen