Анимация селектора меню при скролле

171
22 марта 2017, 17:09

Имеется простая разметка в виде менюшки, 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 под менюшкой двигаться в зависимости от того, на каком блоке контента я нахожусь. То - есть, я начинаю с первого блока, скроллю, и как только я налезаю на второй блок, палочка передвигается под второй пункт меню. Если что - либо не понятно, то подробнее на все это дело можно поглядеть здесь.

Answer 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(
            .....
       );
 }
READ ALSO
box-shadow or border [дубликат]
CSS

box-shadow or border [дубликат]

Данный вопрос уже был задан и имеет решение:

 213
css выбрать нечетные span среди divов
CSS

css выбрать нечетные span среди divов

Есть сколько-то div с внутренним span

 260
удаление некоторых id
MySQL

удаление некоторых id

здраствуйте, простой вопрос , не могу в гугле найтиНеобходимо удалить города, оставить некоторые которые имеют id 60 id 50 и id 70, как удалить другие...

 157
Помогите разобраться в 2 ID
MySQL

Помогите разобраться в 2 ID

Если у меня в таблице geo_state есть два поля с ID - это state_id и country_id

 159