在滚动上更改li活动类

Question

I'm trying to change the li class of my navbar and search on google but I always got an example that change the "a" not the "li". Can you tell me how to change the "li" element not the "a"?

I use this code: https://codepen.io/rishabhp/pen/aNXVbQ

var sections = $('section') c,
  nav = $('nav'),
  nav_height = nav.outerHeight();
$(window).on('scroll', function() {
  var cur_pos = $(this).scrollTop();
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
      bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');

      $(this).addClass('active');
      nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
    }
  });
});
nav.find('a').on('click', function() {
  var $el = $(this),
    id = $el.attr('href');
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);
  return false;
});

Answer 1

are you trying to do something like this ?

 var sections = $('section') , nav = $('nav') , nav_height = nav.outerHeight(); $(window).on('scroll', function () { var cur_pos = $(this).scrollTop(); sections.each(function() { var top = $(this).offset().top - nav_height, bottom = top + $(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { nav.find('li').removeClass('active'); sections.removeClass('active'); $(this).addClass('active'); nav.find('a[href="#'+$(this).attr('id')+'"]').parent("li").addClass('active'); } }); }); nav.find('a').on('click', function () { var $el = $(this) , id = $el.attr('href'); $('html, body').animate({ scrollTop: $(id).offset().top - nav_height + 100 }, 500); return false; }); 

 @import url(https://fonts.googleapis.com/css?family=Open+Sans); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; } /* Navigation */ nav { width: 100%; height: 60px; position: fixed; top: 0; background: #1ABC9C; } nav ul { padding: 20px; margin: 0 auto; list-style: none; text-align: center; } nav ul li { display: inline-block; margin: 0 10px; } nav ul li a { padding: 10px 0; color: #fff; font-size: 1rem; text-decoration: none; font-weight: bold; transition: all 0.2s ease; } nav ul li a:hover { color: #34495E; } a.active { border-bottom: 2px solid #ecf0f1; color: #34495E; } li.active a { border-bottom: 2px solid #ecf0f1; color: #34495E; } /* Headings */ h1 { font-size: 5rem; color: #34495E; } /* Sections */ section { width: 100%; padding: 50px; background: #fff; border-bottom: 1px solid #ccc; height: 500px; text-align: center; } section:nth-child(even) { background: #ecf0f1; } section:nth-child(odd) { background: #bdc3c7; } .sections section:first-child { margin-top: 60px; } section.active {} footer { height: 500px; background: #34495e; } 

 <nav> <ul> <li><a href="#1">First</a></li> <li><a href="#2">Second</a></li> <li><a href="#3">Third</a></li> <li><a href="#4">Fourth</a></li> <li><a href="#5">Fifth</a></li> </ul> </nav> <div class="sections"> <section id="1"><h1>First</h1></section> <section id="2"><h1>Second</h1></section> <section id="3"><h1>Third</h1></section> <section id="4"><h1>Fourth</h1></section> <section id="5"><h1>Fifth</h1></section> </div> <footer></footer> <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

Answer 2

If you don't want to change that code too much you can just do

nav.find('li').removeClass('active');
sections.removeClass('active');

$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');

That's inside the "on scroll" event function. That way you can target the list items instead of the anchor tags.

Answer 3

Here is the solution for your problem based on the code on https://codepen.io/rishabhp/pen/aNXVbQ . Here I have changed nav.find('a').removeClass('active'); to nav.find('li').removeClass('active'); because we have added active class to li instead of anchor tag and nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); to nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active'); because the parent of anchor it li .

 var sections = $('section') , nav = $('nav') , nav_height = nav.outerHeight(); $(window).on('scroll', function () { var cur_pos = $(this).scrollTop(); sections.each(function() { var top = $(this).offset().top - nav_height, bottom = top + $(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { nav.find('li').removeClass('active'); sections.removeClass('active'); $(this).addClass('active'); nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active'); } }); }); nav.find('a').on('click', function () { var $el = $(this) , id = $el.attr('href'); $('html, body').animate({ scrollTop: $(id).offset().top - nav_height }, 500); return false; }); 

 @import url(https://fonts.googleapis.com/css?family=Open+Sans); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; } /* Navigation */ nav { width: 100%; height: 60px; position: fixed; top: 0; background: #1ABC9C; } nav ul { padding: 20px; margin: 0 auto; list-style: none; text-align: center; } nav ul li { display: inline-block; margin: 0 10px; } nav ul li a { padding: 10px 0; color: #fff; font-size: 1rem; text-decoration: none; font-weight: bold; transition: all 0.2s ease; } nav ul li a:hover { color: #34495E; } a.active { border-bottom: 2px solid #ecf0f1; } /* Headings */ h1 { font-size: 5rem; color: #34495E; } /* Sections */ section { width: 100%; padding: 50px; background: #fff; border-bottom: 1px solid #ccc; height: 500px; text-align: center; } section:nth-child(even) { background: #ecf0f1; } section:nth-child(odd) { background: #bdc3c7; } .sections section:first-child { margin-top: 60px; } section.active {} footer { height: 500px; background: #34495e; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li><a href="#1">First</a></li> <li><a href="#2">Second</a></li> <li><a href="#3">Third</a></li> <li><a href="#4">Fourth</a></li> <li><a href="#5">Fifth</a></li> </ul> </nav> <div class="sections"> <section id="1"><h1>First</h1></section> <section id="2"><h1>Second</h1></section> <section id="3"><h1>Third</h1></section> <section id="4"><h1>Fourth</h1></section> <section id="5"><h1>Fifth</h1></section> </div> <footer></footer> 

Answer 4

 var sections = $('section'), nav = $('nav'), nav_height = nav.outerHeight(); $(window).on('scroll', function() { var cur_pos = $(this).scrollTop(); sections.each(function() { var top = $(this).offset().top - nav_height, bottom = top + $(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { nav.find('li').removeClass('active'); sections.removeClass('active'); $(this).addClass('active'); nav.find('a[href="#' + $(this).attr('id') + '"]').parent().addClass('active'); } }); }); nav.find('a').on('click', function() { var $el = $(this), id = $el.attr('href'); $('html, body').animate({ scrollTop: $(id).offset().top - nav_height }, 500); return false; }); 

 /* NAVBAR */ .navbar { margin-bottom: 0; min-height: 0; } .navbar-nav { display: inline-block !important; float: none; height: auto !important; } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; font-size: 15px; font-family: 'Lato', sans-serif; border-bottom: 3px solid transparent; transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; } .navbar-offcanvas .navbar-nav>li.active>a:hover, .navbar-offcanvas .navbar-nav>li.active>a:focus, .navbar-offcanvas .navbar-nav>li.active>a:active, .navbar-offcanvas .navbar-nav>li.active>a:active:hover, .navbar-offcanvas .navbar-nav>li.active>a:active:focus { color: #f6b5ad !important; background-color: transparent !important; border-bottom: 3px solid #f6b5ad; } .nav li a img { height: 28px; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { border-color: #f6b5ad; } .navbar-nav li:hover .dropdown-menu a { border-bottom: none; } 

 <nav class="navbar navbar-default pad-top-10 box-shadow hidden-navbar hidden-xs"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="navbar-offcanvas navbar-offcanvas-touch text-center" id="navbar"> <div id="menu-center"> <ul class="nav navbar-nav text-uppercase"> <li class="active"><a href="index.html">Home</a></li> <li><a href="story.php">Our Story</a></li> <li><a href="#wedding">Our Wedding</a></li> <li><a href="#photo">Our Photo</a></li> <li><a href="#party">Our Party</a></li> <li><a href="#dress">Our Dresses</a></li> <li><a href="#gallery">Our Gallery</a></li> <li><a href="#news">Our News</a></li> </ul> </div> </div> </div> </nav> 

here is what my full code looks like, i've tried the suggestion above but still don't work...