Header.fixed в чем ошибка?

Question

[k4sus]

Коллеги у меня тут возник баг один. Так как начал недавно изучать js.
Суть такова есть header и он фиксируется при скролинге, и все нормально вниз опускается все отлично, но когда снова верх дохожу там он не встает на свою же позицию немного смещается что-ли. не могу понять!

Начальный вид


При возвращение


вот собственно js код

$(function($) {
	        $(window).scroll(function(){
	            if($(this).scrollTop()>0){
	                $('#header-nav').addClass('fixed');
	                $('#content').css('margin-top','0');
	            }
	            else if ($(this).scrollTop()<0){
	                $('#header-nav').removeClass('fixed');
	                $('#content').css('margin-top','0');
	            }
	        });
	    });

Comments

[Андрей]

А зачем вам здесь js? У вас же Header не двигается, если я правильно понимаю? Просто делаете его фиксированным и все

[cssfish]

разберитесь чего пишите:
1)
else if ($(this).scrollTop()<0){

чем else не угодил

2) в обоих случая одна команда:
$('#content').css('margin-top','0');

зачем?

[k4sus]

cssfish, не знаю, говорю же я только начинаю изучать js

[cssfish]

ну так причем тут js, вы логику напишите - что хотите сделать
язык дело десятое

[k4sus]

cssfish, я хочу просто чтобы при скроллинге зафиксировался header и при обратной дороге встал на свое место

[Николай Чуприк]

1. Ваши картинки из разряда "найдите 10 отличий". Я не нашёл ни одного. Хоть какие отметки сделайте, куда смотреть.

2. Как у уже сказали JS здесь не нужен. Всё решается CSS, там где-то у вас и проблема по-видимому. Тут нужно смотреть вёрстку и стили.

[k4sus]

Николай Чуприк, под шапки посмотрите там у одного box shadow виден у другого нет
размывается!

[Tyusha]

rysqulov, ну это явно CSS-проблема. Мне кажется там не c shadow вопрос а border-bottom. Откройте отладчик в браузере и посмотрите стили шапки вначале и после скрола.

[k4sus]

Tyusha, сейчас

[cssfish]

rysqulov, ну т.е. логика такая:
1) если проскроллено > 0 px сверху - дать класс fixed
2) иначе - убрать
т.е. банальное if() else ()

что у вас?
1) если проскроллено > 0 - дать fixed и маржин контенту (тут я хз зачем)
2) если же проскроллено МЕНЬШЕ нуля (??) то убрать fixed b снова дать маржин (я не знаю, что за маржин, но по уму - его в этом случае надо убирать, в противовес первому условию)

понимаете? :)

второе условие заменить на просто else, а с маржином думаю поняли

[cssfish]

а по скринам - зарезается немного полоса, но тут без кода только гадать
скрипт сперва поправьте. скорее всего оно и починится

Answer 1

[Gortyser]

position: fixed
Смысла через js добавлять класс нет, судя по изображениям header изначально в самом верху страницы.