更改導航滾動時激活

Question

我希望導航鏈接具有「激活」類並在滾動時更改。我只有在用戶點擊鏈接時才能使用該代碼。如果用戶通過頁面手動滾動，則活動類不會更改。有什麼建議麼？

$(document).ready(function() { 
    $(document).on("scroll", onScroll); 

    //smoothscroll 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

     $('a').each(function() { 
      $(this).removeClass('active'); 
     }) 
     $(this).addClass('active'); 

     var target = this.hash, 
      menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top+2 
     }, 700, 'swing', function() { 
      window.location.hash = target; 
      $(document).on("scroll", onScroll); 
     }); 
    }); 
}); 


    function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('nav a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('nav ul li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
} 



      <!-- navigation --> 
    <nav> 
    <ul> 
    <li><a href="#bmi">text</a></li> 
    <li><a href="#health">text</a></li> 
    <li><a href="#home" class="active">text</a></li> 
    </ul> 
    </nav> 
</header> 


<section id="home"> 
</section> 

<section id="health"> 
</section> 

<section id="bmi"> 
</section> 

Answer 1

我已經使用了相同的功能。試試這個

var selector = 'nav a'; 
    $(window).scroll(function() { 
     onScrollt(selector); 
    }); 
    function onScrollt(selector) { 
     var scrollPos = $(document).scrollTop(); 
     $(selector).each(function() { 
      var currLink = $(this); 
      var refElement = $(currLink.attr("href")); 
      if (parseInt(refElement.position().top) <= scrollPos && parseInt(refElement.position().top) + parseInt(refElement.height()) > scrollPos) { 
       $(selector).removeClass("active"); 
       currLink.addClass("active"); 
      } else { 
       currLink.removeClass("active"); 
      } 
     }); 
    } 

Answer 2

我已經創建了一個樣本這裏，試試這個，可能是這將幫助你

$(document).ready(function() { 
 
    $(document).on("scroll", onScroll); 
 
    
 
    //smoothscroll 
 
    $('a[href^="#"]').on('click', function (e) { 
 
     e.preventDefault(); 
 
     $(document).off("scroll"); 
 
     
 
     $('a').each(function() { 
 
      $(this).removeClass('active'); 
 
     }) 
 
     $(this).addClass('active'); 
 
     
 
     var target = this.hash, 
 
      menu = target; 
 
     $target = $(target); 
 
     $('html, body').stop().animate({ 
 
      'scrollTop': $target.offset().top+2 
 
     }, 500, 'swing', function() { 
 
      window.location.hash = target; 
 
      $(document).on("scroll", onScroll); 
 
     }); 
 
    }); 
 
}); 
 

 
function onScroll(event){ 
 
    var scrollPos = $(document).scrollTop(); 
 
    $('#menu-center a').each(function() { 
 
     var currLink = $(this); 
 
     var refElement = $(currLink.attr("href")); 
 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
      $('#menu-center ul li a').removeClass("active"); 
 
      currLink.addClass("active"); 
 
     } 
 
     else{ 
 
      currLink.removeClass("active"); 
 
     } 
 
    }); 
 
}

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: rgba(0, 0, 0, 1); 
 
    position: fixed; 
 
    background-color:rgba(4, 180, 49, 0.6); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.light-menu { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: rgba(255, 255, 255, 1); 
 
    position: fixed; 
 
    background-color:rgba(4, 180, 49, 0.6); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
#menu-center { 
 
    width: 980px; 
 
    height: 75px; 
 
    margin: 0 auto; 
 
} 
 
#menu-center ul { 
 
    margin: 15px 0 0 0; 
 
} 
 
#menu-center ul li { 
 
    list-style: none; 
 
    margin: 0 30px 0 0; 
 
    display: inline; 
 
} 
 
.active { 
 
    font-family:'Droid Sans', serif; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
} 
 
a { 
 
    font-family:'Droid Sans', serif; 
 
    font-size: 14px; 
 
    color: black; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
} 
 
#home { 
 
    background-color: grey; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-image: url(images/home-bg2.png); 
 
} 
 
#portfolio { 
 
    background-image: url(images/portfolio-bg.png); 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#about { 
 
    background-color: blue; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#contact { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="m1 menu"> 
 
    <div id="menu-center"> 
 
     <ul> 
 
      <li><a class="active" href="#home">Home</a> 
 

 
      </li> 
 
      <li><a href="#portfolio">Portfolio</a> 
 

 
      </li> 
 
      <li><a href="#about">About</a> 
 

 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 

 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<div id="home"></div> 
 
<div id="portfolio"></div> 
 
<div id="about"></div> 
 
<div id="contact"></div>

Answer 3

下面的代碼工作的滾動和點擊。我已經使用你的代碼來描述場景。

下面是該工作例子..

$(document).ready(function() { 
 
    $(document).on("scroll", onScroll); 
 

 
    //smoothscroll 
 
    $('a[href^="#"]').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(document).off("scroll"); 
 

 
    $('a').each(function() { 
 
     $(this).removeClass('active'); 
 
    }) 
 
    $(this).addClass('active'); 
 

 
    var target = this.hash, 
 
     menu = target; 
 
    $target = $(target); 
 
    $('html, body').stop().animate({ 
 
     'scrollTop': $target.offset().top + 2 
 
    }, 500, 'swing', function() { 
 
     window.location.hash = target; 
 
     $(document).on("scroll", onScroll); 
 
    }); 
 
    }); 
 
}); 
 

 
function onScroll(event) { 
 
    var scrollPos = $(document).scrollTop(); 
 
    $('nav a').each(function() { 
 
    var currLink = $(this); 
 
    var refElement = $(currLink.attr("href")); 
 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
     $('nav ul li a').removeClass("active"); 
 
     currLink.addClass("active"); 
 
    } else { 
 
     currLink.removeClass("active"); 
 
    } 
 
    }); 
 
}

body, 
 
html { 
 
    height: 100%; 
 
    width: 100%: 
 
} 
 

 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-boz; 
 
} 
 

 
section { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
nav ul { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    padding: 20px 0; 
 
    margin-left: 20px; 
 
    list-style: none; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
nav ul li a.active { 
 
    color: white 
 
} 
 

 
section { 
 
    background: red; 
 
} 
 

 
section+section { 
 
    background: green; 
 
} 
 

 
section+section+section { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#bmi">text</a></li> 
 
     <li><a href="#health">text</a></li> 
 
     <li><a href="#home" class="active">text</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 

 
<section id="home"> 
 
</section> 
 

 
<section id="health"> 
 
</section> 
 

 
<section id="bmi"> 
 
</section>