JS implements positioning navigation bar-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS implements positioning navigation bar

Mar 15, 2018 am 11:48 AM

javascript position navigation

This time I will bring you JS to implement the positioning navigation bar. What are the precautions for JS to implement the positioning navigation bar? The following is a practical case, let's take a look.

The complete code is as follows:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=&quot;utf-8&quot;&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
*{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;} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p style=&quot;height:200px;width:100%;&quot;&gt;&lt;/p&gt; 
&lt;p class=&quot;nav&quot;&gt; 
  &lt;ul&gt; 
    &lt;li class=&quot;active&quot;&gt;page1&lt;/li&gt; 
    &lt;li&gt;page2&lt;/li&gt; 
    &lt;li&gt;page3&lt;/li&gt; 
    &lt;li&gt;page4&lt;/li&gt; 
    &lt;li&gt;page5&lt;/li&gt; 
    &lt;li&gt;page6&lt;/li&gt; 
    &lt;li&gt;page7&lt;/li&gt; 
    &lt;li&gt;page8&lt;/li&gt; 
  &lt;/ul&gt; 
&lt;/p&gt; 
&lt;p class=&quot;cont&quot;&gt; 
  &lt;ol&gt; 
    &lt;li style=&quot;background:#aaa&quot;&gt;&lt;p&gt;page1&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#999&quot;&gt;&lt;p&gt;page2&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#666&quot;&gt;&lt;p&gt;page3&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#333&quot;&gt;&lt;p&gt;page4&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#bbb&quot;&gt;&lt;p&gt;page5&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#aaa&quot;&gt;&lt;p&gt;page6&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#ccc&quot;&gt;&lt;p&gt;page7&lt;/p&gt;&lt;/li&gt; 
    &lt;li style=&quot;background:#000&quot;&gt;&lt;p&gt;page8&lt;/p&gt;&lt;/li&gt; 
  &lt;/ol&gt; 
&lt;/p&gt;  
&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot;&gt;  
$(".nav ul li").click(function(){ 
    var index=$(this).index(); 
    var i=150+index*501+'px' 
    $("html,body").animate({scrollTop:i},500)      
  })    
$(window).scroll(function(){ 
    if($(window).scrollTop()&gt;150){ 
      $(".nav").css({"position":"fixed","top":"0px"}) 
    } 
    else{ 
      $(".nav").css({"position":"absolute","top":"150px"}) 
    }  
  for(var x=0;x&lt;8;x++){ 
    var i=150+x*500 
  if($(window).scrollTop()&gt;i &amp;&amp; $(window).scrollTop()&lt;i+500){   
    $(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")} 
  }  
}) 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!