Странное поведение прилипающего header при обновлении страницы?

Question

[sergey]

Собственно в чем проблема, есть прилипающее меню (header) при скролле, использую для этого простой скрипт на jQuery

$(window).scroll(function(){
		if ( $(document).scrollTop() >= 1) {
			$('.header').addClass("fixed");
		} else {
			$('.header').removeClass("fixed");
		}
	});

суть проста, если скроллить то к header присваивается класс fixed:

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1920px;
  min-width: 1000px;
  background-color: transparent;
  display: block!important;
  z-index: 1045;
......//меню
}
.header.fixed{
  background-color: #ff9774;
  opacity: 0.98;
  filter: alpha(Opacity=98);
  z-index: 1099;
  height: auto;
  width: 100%;
}

так вот в чем проблема, скроллим к следующему блоку, все ок, применяется fixed, все функционирует, обновляем страницу первый раз все ок, второй раз все ок, но вот на третий или какой-то раз класс fixed отваливается, это случается иногда и с первого раза, иногда с третьего-четвертого. С чем это связанно может быть?

Comments

[iBird Rose]

зачем тебе вообще скрипт если ты присваиваешь его когда >= 0. тобишь ты его изначально можешь делать fixed. и чтобы он был таким всегда

[sergey]

iBird Rose: дело в простом: изначально этот header прозрачен и с позиционирован поверх слайдера, при скролле классом ему добавляется непрозрачность, стили

[Денис Букреев]

SM: дак ставь ему позиционирование сразу, а классом добавляй прозрачность и стили.
Чего проблемы себе придумывать?)

[sergey]

Денис Букреев: ну если бы все так просто было, то наверное не придумывал бы. Все решено уже.

Answer 1

[Дима Паутов]

Запускать такие вещи нужно, используя 2 события. Загрузки документа и скрола документа.

Ведь, если мы обновили страницу где то по середине контента, то блок не прилипнет, ведь у вас он прилипает только при скролинге странце. Делать нужно так:

Либо так:

$(window).on('load scroll', function(){
//Скрипт
});

Либо так:

function fixedHeaderOnScroll(){
// Ваш код 
}

$(document).on('ready', function(){
fixedHeaderOnScroll();
});

$(window).on('scroll', function(){
fixedHeaderOnScroll();
});

При загрузке страницы не должно и не происходит событие скролла, а значит, ваш скрипт не должен срабатывать. С чего он у вас запускается, для меня загадка.

P.S. Какой смысл фиксировать блок, если длина скролла больше 1px? Не проще ли сразу зафиксировать блок?

Comments

[sergey]

Какой смысл фиксировать блок - читайте ответ выше

[Дима Паутов]

SM: Вы просто делаете фиксированный блок при скроллинге. Исходя из вопроса и кода, другого не написано. Так какой смысл фиксировать еге через 1px? Проще сразу это сделать.

[Дима Паутов]

john john: К чему ваш комментарий? Или вы просто решили на основе других, идиотских ответов, похожих на ваш, что это смешно? Школьный юмор тут не уместен

[sergey]

Дима Турков: Вы не поняли, есть header абсолютом поверх слайдера, и он изначально прозрачный, при скролле (скролл блочный) header меняет стили, первое это цвет. Все просто.

[Дима Паутов]

SM: Тогда прошу прощения, за свою не внимательность! Надеюсь мой ответ смог вам помочь!

[sergey]

Дима Турков: да, спасибо!

Answer 2

[Сергей Горячев]

Я уже не помню точно, как решил в прошлый раз, но у меня такая хрень была.
Если $(window).scroll(function() находится в load или document ready вытащи оттуда.
Или если он не находится там, положи туда его)

Сейчас вот нашел еще вот такой хак, для document ready.

jQuery(window).scrollTop(jQuery(window).scrollTop() + 1);
jQuery(window).scrollTop(jQuery(window).scrollTop() - 1);

Comments

[sergey]

да что-то не особо помогло:)

[Сергей Горячев]

SM: Честно, не помню, как решил) Попробуй хак описанный выше)

[sergey]

Sergey Goryachev: спс, сейчас попробуем:)

[sergey]

Sergey Goryachev: этот хак вместе со скриптом использовать, или скрипт убрать из реади?

[Сергей Горячев]

SM: Скрипт за пределами реади, а хак внутри реади.

[sergey]

Sergey Goryachev: ну ты волшебник, спасибо.

Answer 3

[Сергей delphinpro]

var $w = $(window);
  $w.on('scroll', function(){
    $('.header').toggleClass("fixed", $w.scrollTop() > 0);
  }).trigger('scroll');

Answer 4

[Anton]

Смотри в консоли ошибки. Возможно периодически не срабатывает js-скрипт.

Comments

[sergey]

в том то и проблема что консоль чиста, что странное если обновлять страницу рефрешом то как бы ок все, но если ctrl + f5 - то вылазить трабл, но при повторном обновлении, или скролле все становится на свои места.