Боковая навигация по LandingPage как реализовать?

275

22 февраля 2017, 23:13

Добрый день уважаемые. Разбираюсь с панелью навигации по одностраничнику возникли вопросы, очень надеюсь что вы подскажите как решить. Пример:

window.onload=function(){ 
     var navigateMenu = $(".slider-nav-menu"), 
          activeMenu = $(".menu-active"); 
 
     console.log($(".slider-nav-menu a").length + " = elem"); 
 
    navigateMenu.on("click", $("li"), function(){ 
						$(this).find("a").removeClass("menu-active"); 
            $(this).find("a").addClass("menu-active"); 
          
    }); 
}

.block{ 
  position: relative; 
  width: 100%; 
  height: 400px; 
  border: 1px solid #000;   
} 
#block1{ 
  background-color: #f00; 
} 
#block2{ 
  background-color: #0f0; 
} 
#block3{ 
  background-color: #0ff; 
} 
#block4{ 
  background-color: #f0f; 
} 
#block5{ 
  background-color: #ff0; 
} 
h1{ 
  margin: 25% 0 0 50%; 
  text-decoration: none; 
} 
ul{ 
  list-style-type: none; 
} 
 
.slider-nav { 
  position: fixed; 
  right: 5%; 
  top: 50%; 
  width: 50px; 
  height: 100px; 
  z-index: 100; 
} 
.slider-nav-menu li:nth-child(even) a { 
  background-color: black; 
} 
 .slider-nav-menu li:nth-child(odd) a { 
  background-color: yellow; 
} 
 .slider-nav-menu a { 
  display: block; 
  margin: 100% 0; 
  width: 20px; 
  height: 20px; 
  border: 1px solid #000; 
  border-radius: 50%; 
} 
 a.menu-active { 
  position: relative; 
  transform: scale(1.4); 
  transiton: transform 0.5s; 
} 
 a.menu-active:after { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin: -5px 0 0 -5px; 
  content: ""; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  border: 1px solid #000; 
  background-color: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="slider-nav"> 
        <ul class="slider-nav-menu"> 
            <li><a class="menu-active" href="#block1"></a></li> 
            <li><a class="" href="#block2"></a></li> 
            <li><a class="" href="#block3"></a></li> 
            <li><a class="" href="#block4"></a></li> 
            <li><a class="" href="#block5"></a></li> 
        </ul> 
 </nav> 
 
 
<div id="block1" class="block"><h1>TEST1</h1></div> 
<div id="block2" class="block"><h1>TEST2</h1></div> 
<div id="block3" class="block"><h1>TEST3</h1></div> 
<div id="block4" class="block"><h1>TEST4</h1></div> 
<div id="block5" class="block"><h1>TEST5</h1></div>

1) Как присваивать класс menu-active только той ссылки на которую кликнул, удаляя перед этим данный класс со всех других? 2) Как реализовать добавление этого класса при прокрутке сайта? (Я прокрутил до 3 раздела у меня увеличился 3-й кружок, а со второго пропал), при этом размеры блоков в реальном проекте разные.

Answer 1

Во-первых у вас ошибка в on()

Вторым параметром передается селектор, а не jQuery-объект:

navigateMenu.on("click", "li", function() {

Ответ на 1 вопрос

1) Как присваивать класс menu-active только той ссылки на которую кликнул, удаляя перед этим данный класс со всех других?

На этот вопрос я отвечал тут: Как на jquery добавить добавить классы к родителю и ребенку, и удалить аналогичные классы у соседей?

В вашем случае сделаю так:

navigateMenu.find("a").removeClass("menu-active");
$(this).find("a").addClass("menu-active");

Ответ на 2 вопрос

2) Как реализовать добавление этого класса при прокрутке сайта?

Нужно обрабатывать событие onScroll.

Узнать текущую позицию скрола можно с помощью $(window).scrollTop(), а позицию объекта (раздела) относительно документа с помощью .offset()

Рабочий код

var navigateMenu = $(".slider-nav-menu"); 
 
$(window).load(function() { 
 
  console.log($(".slider-nav-menu a").length + " = elem"); 
  navigateMenu.on("click", "li", function() { 
 
    navigateMenu.find("a").removeClass("menu-active"); 
    $(this).find("a").addClass("menu-active"); 
 
  }); 
}) 
 
$(window).scroll(function() { 
 
  var scrolltop = $(window).scrollTop() 
 
  $('.block').each(function(n) { 
    if (scrolltop > $(this).offset().top && scrolltop < $(this).offset().top + $(this).height()) { 
      navigateMenu.find("a").removeClass("menu-active"); 
      navigateMenu.find("a").eq(n).addClass("menu-active"); 
 
    } 
  }) 
 
})

.block { 
  position: relative; 
  width: 100%; 
  height: 400px; 
  border: 1px solid #000; 
} 
 
#block1 { 
  background-color: #f00; 
} 
 
#block2 { 
  background-color: #0f0; 
} 
 
#block3 { 
  background-color: #0ff; 
} 
 
#block4 { 
  background-color: #f0f; 
} 
 
#block5 { 
  background-color: #ff0; 
} 
 
h1 { 
  margin: 25% 0 0 50%; 
  text-decoration: none; 
} 
 
ul { 
  list-style-type: none; 
} 
 
.slider-nav { 
  position: fixed; 
  right: 5%; 
  top: 50%; 
  width: 50px; 
  height: 100px; 
  z-index: 100; 
} 
 
.slider-nav-menu li:nth-child(even) a { 
  background-color: black; 
} 
 
.slider-nav-menu li:nth-child(odd) a { 
  background-color: yellow; 
} 
 
.slider-nav-menu a { 
  display: block; 
  margin: 100% 0; 
  width: 20px; 
  height: 20px; 
  border: 1px solid #000; 
  border-radius: 50%; 
} 
 
a.menu-active { 
  position: relative; 
  transform: scale(1.4); 
  transiton: transform 0.5s; 
} 
 
a.menu-active:after { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin: -5px 0 0 -5px; 
  content: ""; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  border: 1px solid #000; 
  background-color: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="slider-nav"> 
  <ul class="slider-nav-menu"> 
    <li> 
      <a class="menu-active" href="#block1"></a> 
    </li> 
    <li> 
      <a class="" href="#block2"></a> 
    </li> 
    <li> 
      <a class="" href="#block3"></a> 
    </li> 
    <li> 
      <a class="" href="#block4"></a> 
    </li> 
    <li> 
      <a class="" href="#block5"></a> 
    </li> 
  </ul> 
</nav> 
 
 
<div id="block1" class="block"> 
  <h1>TEST1</h1> 
</div> 
<div id="block2" class="block"> 
  <h1>TEST2</h1> 
</div> 
<div id="block3" class="block"> 
  <h1>TEST3</h1> 
</div> 
<div id="block4" class="block"> 
  <h1>TEST4</h1> 
</div> 
<div id="block5" class="block"> 
  <h1>TEST5</h1> 
</div>