Как сделать фиксированное навигационное меню?

Question

[westdp]

Всем привет, попытался сделать фиксированное навигационное меню по средине экрана слева(6 точек) для сайта, сделал не очень грамотно, но я пока учусь.
Вот демо работы

jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() < jQuery('.slider_main').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#main_slider').addClass('active');
  }
});
jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() > jQuery('.slider_main').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#our_services').addClass('active');
  }
});
jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() > jQuery('.slider_main').outerHeight() + jQuery('.our_services_main_page').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#our_expertise').addClass('active');
  }
});
jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() > jQuery('.slider_main').outerHeight() + jQuery('.our_services_main_page').outerHeight() + jQuery('.expertise_main_page').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#portfolio').addClass('active');
  }
});
jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() > jQuery('.slider_main').outerHeight() + jQuery('.our_services_main_page').outerHeight() + jQuery('.expertise_main_page').outerHeight() + jQuery('.portfolio_main_page').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#blog_section').addClass('active');
  }
});
jQuery(window).on('scroll', function() {
  if(jQuery('body').scrollTop() > jQuery('.slider_main').outerHeight() + jQuery('.our_services_main_page').outerHeight() + jQuery('.expertise_main_page').outerHeight() + jQuery('.portfolio_main_page').outerHeight() + jQuery('.blog_main_page').outerHeight()) {
     jQuery('.button_pagination span').removeClass('active');
     jQuery('#featured_partners').addClass('active');
  }
});

Этот код работает в Google Chrome, Opera и Safari, но в IE и Mozilla Firefox нет, можете подсказать в чем моя ошибка?
Спасибо

Answer 1

[astrojunk]

я бы переверстал как

<header> с CSS position:fixed
<section> добавить сверху паддинг, такой же как высота хедера
вся остальная контентная область 
</section>

меняем класс у body, дальше с помощью css перекрашиваем бэкграунд у хедера.

js будет намного проще

var body = $('body');

function checkScroll() {
(window.pageYOffset != 0) ? body.addClass('scrolled') : body.removeClass('scrolled');
}

window.onscroll = function () {
checkScroll();
};

Comments

[westdp]

Я не понял о чем вы, вы говорите о меню сверху?

[astrojunk]

о. пардон. да. я про верхнее меню. про левое. я бы предложил написать одну функцию - "проверить активный раздел". она при инициализации собирает все высоты блоков. на onscroll делает проверку - насколько отскроллено окно (window.pageYOffset) и возвращает по сути индекс активного блока. используя этот индекс мы ставим активный класс в навигационном меню. код уменшьшится в 4 раза минимум

[westdp]

astrojunk буду признателен если наведете пример)
Спасибо,

[astrojunk]

как-то так примерно

(function($){
var heights = $.makeArray($('.container_home')).map(function(container,i){return container.offsetTop});

$(window).on('scroll', function() {

heights.forEach(function(height,i){
if (height < $('body').scrollTop() && height < heights[i+1]) { //Добавить проверку если находимся наверху или если докрутили до последнего блока (не будет следующего heights[i+1] блока)
$('.button_pagination span').removeClass('active');
$('.button_pagination')[i].addClass('active');
}
}

}
});
})(jQuery)