1

Имеется простая разметка в виде менюшки, div'ов, на которые пункты менюшки ссылаются и небольшого stick'а, который должен двигаться под менюшкой в зависимости от того, на каком блоке контента пользователь находится.

Также имеется js - код, который делает нужный пункт менюшки активный при скролле и при нажатии, а также делает шапку фиксированной при определенном скролле от top'a

$(window).on('scroll', (function() {
  if ($(this).scrollTop() > 299) {
    $('.navigation').addClass("navigation-fixed");
    $('#block1').css("margin-top", "50px");
    $('.navigation-pos').addClass("navigation-pos-animate");
    $('.fa-home').addClass('fa-home-visible');
    $('.nav-button-selected').addClass('nav-button-selected-visible');
    $('.inner-navigation-pos').addClass('inner-navigation-pos-animate');
  } else {
    $('.navigation').removeClass("navigation-fixed");
    $('#block1').css("margin-top", "0px");
    $('.navigation-pos').removeClass("navigation-pos-animate");
    $('.fa-home').removeClass('fa-home-visible');
    $('.nav-button-selected').removeClass('nav-button-selected-visible');
    $('.inner-navigation-pos').removeClass('inner-navigation-pos-animate');
  }
}));

$(document).on("scroll", onScroll);

$('.navigation-pos').on('click', 'a', function(e) {

  e.preventDefault();

  $(document).off("scroll");
  $('a').each(function() {
    $(this).removeClass('active');
  });
  $(this).addClass('active');

  var target = this.hash,
    $target = $(target);
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top - 50
  }, 800, function() {
    window.location.hash = target;
    $(document).on("scroll", onScroll);
  });
});

function onScroll() {
  var scrollPos = $(document).scrollTop();
  $('.inner-nav a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top - 50 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.inner-nav a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-navigation-pos">
  <ul class="inner-nav">
    <li class="nav-button"><a href="#block1">About me</a></li>
    <li class="nav-button"><a href="#block2">My works</a></li>
    <li class="nav-button"><a href="#block3">Blog</a></li>
    <li class="nav-button"><a href="#block4">Contacts</a></li>
  </ul>
  <div class="nav-button-selected"></div>
</div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>

Задача - заставить stick под менюшкой двигаться в зависимости от того, на каком блоке контента я нахожусь. То - есть, я начинаю с первого блока, скроллю, и как только я налезаю на второй блок, палочка передвигается под второй пункт меню. Если что - либо не понятно, то подробнее на все это дело можно поглядеть здесь.

1 ответ 1

1

Вот вы определили какой элемент активный и назначили ему класс:

currLink.addClass("active");

Далее определяете его позицию с помощью .position()

var left=currLink.position().left;

затем ширину с помощью .width()

var width=currLink.width();

И даете эти координаты вашей полосочке. (Она должна быть position:absolute, а само меню - position:relative). Анимацию задаете с помощью animate():

$( "#id_полосочки" ).animate({
    width: width+'px',
    left: left+'px'
  },300);

animate() надо вызывать только при смене активного блока, иначе анимация будет сбиваться при постоянной прокрутке. Создайте глобальную(!) переменную, которая будет содержать последний активный блок:

 var lastactive;

и вызывайте animate только при изменении актиного блока.

 if(lastactive!=currLink.attr('href')){
       lastactive=currLink.attr('href');
       $( "#id_полосочки" ).animate(
            .....
       );
 }
3
  • вроде получилось, но корректо работает только когда переходишь на блоки по ссылке, а если просто скроллить - работает, но странно. ( неправильно работает speed у animate, еще есть косяки, но я не знаю, как их описать словами - посмотрите по ссылке сверху пж)
    – g3rmesov
    21 мар 2017 в 12:30
  • @g3rmesov А все ясно,когда скролишь, animate постоянно вызывается и не дает анимации происходить нормально. Сейчас допишу в ответ
    – Crantisz
    21 мар 2017 в 12:37
  • воо, спасибо большое, все заработало) можно еще вопросец по скроллу? между блоком my works и blog как - будто есть какое - то пустое пространство, когда класс active не срабатывает, между blog и contacts тоже. голову сломал, не пойму, в чем дело, не подскажите?) (можно увидеть это на медленном скролле или просто перейти по ссылке blog или contacts)
    – g3rmesov
    21 мар 2017 в 12:49

Ваш ответ

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

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