Что делать если при скролле фиксированного хэдера,он перепрыгивает вниз?

Question

[No_name404]

сделал с помощью этого кода

$(window).scroll(function() { 
            var the_top = $(document).scrollTop();
            if (the_top > 90) {
                $('.header-down').addClass('navbar-fixed-top');
            }
            else {
                $('.header-down').removeClass('navbar-fixed-top');
            }
        })

фиксированную шапку при прокрутке, фиксирую с помощью класса bootstrap navbar-fixed-top Все работает круто, но при скролле вниз и появлении фиксированной шапки, вся основная часть сайта перепрыгивает на 100px вниз. То есть при скролле хэдер так и остается зафиксированным, но резко происходит перемещение вниз еще. В консоле смотрел маргины,ничего не помогает

Comments

[Никита Ермиличев]

Делайте в момент перехода отступ верхней части шаблона на высоту шапки или сделайте второй блок (скрытый)

[No_name404]

Никита, переход или второй блок это все относится к классу navbar-fixed-top?
И еще это второй скрытый блок должен быть пустым?

[Никита Ермиличев]

No_name404, есть возможность предоставить ссылку на сайт, где это делаете?

[No_name404]

Никита f0236766.xsph.ru вот ссылка

Answer 1

[Никита Ермиличев]

$(window).scroll(function() { 
            var the_top = $(document).scrollTop();
            if (the_top > $('.container-fluid.header-top').height()) {
                $('.header-down').addClass('navbar-fixed-top');
				$('header').css({'margin-top':parseInt($('.header-down').height())+20+'px'});
            }
            else {
                $('.header-down').removeClass('navbar-fixed-top');
				$('header').css({'margin-top':0});
            }
        })

И еще нужно поменять margin-bottom на padding-bottom для элемента с классом .navbar

Comments

[No_name404]

Никита, спасибо большое!

[Никита Ермиличев]

No_name404, Обращайтесь :)

P.S. выставьте флаги состояния (типа шапка уже плавает/шапка уже фиксирована), иначе при каждом скролле у Вас будут выполняться действия согласно условиям (зачем занимать лишние ресурсы? ^_^)

[No_name404]

Никита, немного не понял,могли бы более просто объяснить ,пожалуйста

[Никита Ермиличев]

No_name404, Ну вот смотрите, каждый раз, когда Вы скролите происходит проверка

if (the_top > x)

и выполняется одно из условий, либо

$('.header-down').addClass('navbar-fixed-top');
$('header').css({'margin-top':parseInt($('.header-down').height())+20+'px'});

либо

$('.header-down').removeClass('navbar-fixed-top');
$('header').css({'margin-top':0});

Если коротко, то нет смысла добавлять класс navbar-fixed-top и отступ, когда это уже сделано и наоборот

[No_name404]

Никита, все,понял вас,спасибо еще раз большое,удачи вам во всем