0

var position = 0;
var current_index = 0;

var navlist = document.getElementsByClassName("menu__link")
window.onscroll = function() {
  position = window.pageYOffset;
}

function Scroll(id, index) {
  navlist[current_index].className = "menu__link"
  current_index = index;
  navlist[current_index].className = "menu__link active"
  var el_pos = document.getElementById(id).offsetTop;

  var interval;

  if (position < el_pos) {
    interval = setInterval(function() {
      position += 13;
      if (position + 50 >= el_pos) {
        clearInterval(interval);
      } else {
        window.scrollTo(0, position);
      }
    }, 0);
  } else {
    interval = setInterval(function() {
      position -= 13;
      if (position + 50 <= el_pos) {
        clearInterval(interval);
      } else {
        window.scrollTo(0, position);
      }
    }, 0);
  }
}
<nav class="navigation">
  <ul class="menu" id="menu">
    <li class="menu__item">
      <a class="menu__link active" onclick="Scroll('home', 0)">Home</a>
    </li>
    <li class="menu__item">
      <a href="services" class="menu__link" onclick="Scroll('services', 1)">About Us</a></li>
    <li class="menu__item">
      <a class="menu__link" onclick="Scroll('project', 2)">Portfolio</a></li>
    <li class="menu__item">
      <a class="menu__link">Features</a></li>
    <li class="menu__item">
      <a class="menu__link">Blog</a></li>
    <li class="menu__item">
      <a class="menu__link">Pricing</a></li>
    <li class="menu__item">
      <a class="menu__link">Shortcodes</a></li>
    <li class="menu__item">
      <a class="menu__link">Contact</a></li>
  </ul>
  <img src="img/cart.svg" alt="" class="menu__cart">
  <div class="search">
    <input class="search__input" type="text" placeholder="Поиск">
    <img src="img/search.svg" class="search__icon" alt="">
  </div>
</nav>

  1. Можно ли реализовать на чистом JS?
  2. Если нет,то какую библиотеку надо?

Пока лишь реализовано, чтоб было подсвечено меню которое нажал

1
  • Если нельзя реализовать на чистом js, то и библиотека не поможет, так как библиотеки - это и есть чистый js "в красивой обертке" 3 мая 2018 в 4:45

1 ответ 1

1
    <header class="sticky-header">
        <nav class="top-menu">
            <ul>
                <li><a class="active" href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#service">Услуги</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>
<section id="home">
    Здесь любой контент...
</section>
<section id="about">
    Здесь любой контент...
</section>
<section id="service">
    Здесь любой контент...
</section>
<section id="contact">
    Здесь любой контент... 
</section>

jQuery

var menu_selector = ".top-menu"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню. 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    $("a[href^=#]").click(function(e){
        e.preventDefault();
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
    });
});

И затем просто его проинициализируйте.

$(document).ready(function(){
    $(".top-menu").changeActiveNav();
});

Рабочий пример: https://codepen.io/praim/pen/NMgdLb

1
  • Я находил этот пример в инете, но потом в консоли выводит Uncaught TypeError: Cannot read property 'top' of undefined at HTMLAnchorElement.<anonymous> (main.js:36) at Function.each (jquery-1.11.3.min.js:2) at m.fn.init.each (jquery-1.11.3.min.js:2) at HTMLDocument.onScroll (main.js:33) at HTMLDocument.dispatch (jquery-1.11.3.min.js:4) at HTMLDocument.r.handle (jquery-1.11.3.min.js:4)
    – Олег
    3 мая 2018 в 8:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.