Активное меню SrollSpy

278
23 июня 2018, 15:00

Есть код , идея в том чтобы активному пункту меню присваивался класс, сейчас класс присваивается для a href="", а нужно чтобы класс добавлялся для li, не понимаю как правильно описать, то что сейчас $('li').children('a[href="#' + id+ '"]').addClass('active').siblings().removeClass( 'active' ); - такой вариант добавляет, но не удаляет класс у ссылок

$(function(){ 
 
 
	$("nav").on('click', '[href*="#"]', function(e){ 
	  var offset = 0; 
	  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - offset }, 1000); 
	  	e.preventDefault(); 
		}); 
}); 
 
$(window).bind('scroll', function() { 
    var currentTop = $(window).scrollTop(); 
    var elems = $('.block'); 
    elems.each(function(index){ 
      var elemTop 	= $(this).offset().top; 
      var elemBottom 	= elemTop + $(this).height(); 
      if(currentTop >= elemTop && currentTop <= elemBottom){ 
        var id 		= $(this).attr('id'); 
        var navElem = $('a[href="#' + id+ '"]'); 
    navElem.parent().addClass('active').siblings().removeClass( 'active' ); 
  
      } 
    }) 
}); 
nav { 
  position: fixed; 
  top: 20px; 
  z-index: 9999; } 
  nav ul { 
    list-style: none; } 
    nav ul li { 
      display: inline-block; } 
      nav ul li a { 
        padding: 10px; 
        background-color: #666; 
        color: #fff; } 
        nav ul li a:hover { 
          background-color: #999999; 
          color: #fff; 
          text-decoration: none; } 
        nav ul li a:active { 
          background-color: #333333; } 
 
.active { 
  background-color: skyblue; } 
  .active:hover, .active:active { 
    background-color: #5bbce4 !important; } 
 
 
.block { 
  width: 100%; 
  height: 100vh; } 
 
.block-1 { 
  background: tomato; } 
 
.block-1 { 
  background: #ff8c66; } 
 
.block-2 { 
  background: #ffb366; } 
 
.block-3 { 
  background: #ffd966; } 
 
.block-4 { 
  background: #ffff66; } 
 
.block-5 { 
  background: #d9ff66; } 
  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<nav> 
            <ul> 
              <li><a href="#one">One</a></li> 
              <li><a href="#two">Two</a></li> 
              <li><a href="#three">Three</a></li> 
              <li><a href="#four">Four</a></li> 
              <li><a href="#five">Five</a></li> 
            </ul> 
          </nav> 
  
 <div class="block block-1" id="one"></div> 
  <div class="block block-2" id="two"></div> 
   <div class="block block-3" id="three"></div> 
    <div class="block block-4" id="four"></div> 
     <div class="block block-5" id="five"></div>

READ ALSO
Конфликт datetimepicker и MultiDatesPicker

Конфликт datetimepicker и MultiDatesPicker

Проблема в том, что на админ-панели сайта подключена библиотека datetimepicker и никак нельзя её отключитьНужно реализовать выбор несколько дат,...

273
Поведение меню при кликах

Поведение меню при кликах

Есть такая загвоздка:

266
Jquery маска номера телефона

Jquery маска номера телефона

День добрый! Подскажите пожалуйстаВ интернете описана кучу методов использования масок на инпутах

255