Липкая навигация прилипает к началу слишком рано

У меня есть липкая панель навигации на моем сайте (на основе Bootstrap), и это код jQuery:

    $(document).ready(function () {

        var flag = false;

        function stickNav() {
            $(".navbar-default").affix({
                offset: {
                    top: $('.header-img').height()
                }
            });
            $(".navbar-default").css({ "width": $('.container').width(), "z-index": 1000 });
            $(".navbar-wrapper").css("height", $('.navbar-default').height());
            $(".header").css("height", $('.header-img').height());
            flag = true;

        }

        $(".header img").ready(function () {
            if (!flag)
                window.setInterval(stickNav, 10);
        });

        $(window).resize(function () {
            $(window).off('.affix');
            $('.navbar-default').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
            stickNav();
        });

и CSS:

.affix {
    top: 0;
    width: 100%;
}

Проблема в том, что навигация слишком рано прилипает к верху, вот живой пример: http://nave.net23.net/Bootstrap/index.html

Мой вопрос, как я могу это исправить?

Спасибо.


jquery css twitter-bootstrap navbar sticky
person Tal    schedule 10.08.2015    source источник
comment
Для меня это выглядит нормально, навигация прилипает к верхней части, как только вы прокручиваете до точки, в которой навигация касается верхней части окна браузера.   -  person APAD1    schedule 11.08.2015
comment
Так это работает в настоящее время, как только заголовок больше не виден, навигация прилипает к вершине.   -  person APAD1    schedule 11.08.2015
comment
@APAD1 Спасибо, в Firefox это работает нормально, но в Chrome это выглядит так: screencast.com/t/Mv8Ex3AHj , почему?   -  person Tal    schedule 11.08.2015
comment
Хм, это странно. Я использую Chrome 45, и он выглядит нормально и выглядит так же, как и в Firefox для меня. Попробуйте почистить кеш, может дело в этом.   -  person APAD1    schedule 11.08.2015
comment
Я думаю, вы оба правы. Я увидел, о чем говорит @Tal в Chrome, затем изменил размер, и, похоже, все заработало правильно. Что-то с вашим событием изменения размера или функцией stickNav, которая не вызывается должным образом при запуске, также может относиться к тому, что изображения не загружаются для меня из-за ABP. - В связи с этим, у вас установлен блокировщик рекламы, который не позволяет правильно загрузить изображения в шапке?   -  person Mark    schedule 11.08.2015
comment
Выключил ABP - теперь я просто вижу вашу неприятную всплывающую рекламу. После этого проблема все еще кажется распространенной, если вы не введете две строки, как показано в моем ответе. Похоже, это не связано с рекламным блоком.   -  person Mark    schedule 11.08.2015
comment
@mark.hch Извините за рекламу, хостинговая компания вставляет их на страницу.   -  person Tal    schedule 11.08.2015
comment
Лол, ничего страшного - извините за жалобу! Никогда не помешает мне помочь кому-то, насколько я понимаю использование, я просто предпочитаю не себе, так как я больше хочу, чтобы клиент был доволен, и они будут продолжать возвращаться. тип парень.   -  person Mark    schedule 11.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

Когда я загружаю страницу и у меня возникает проблема в Chrome (44.0.2403.130 m), я могу ввести следующие две строки в консоль, и тогда прокрутка работает правильно (как видно в Firefox). Возможно, просто вызовите их вручную в функции загрузки страницы:

$(window).off('.affix');
$('.navbar-default').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
person Mark    schedule 10.08.2015
comment
Спасибо! Я думаю, что я могу исправить это с этого момента. РЕДАКТИРОВАТЬ: не могли бы вы удалить пример GIF? Сайт находится в стадии разработки, и я не хочу, чтобы его увидели случайные люди... - person Tal; 11.08.2015
comment
Вероятность того, что кто-то случайно заметит это и действительно примет во внимание информацию, очень и очень маловероятна, но в любом случае я инициировал процесс ее удаления. Я могу держать вас в курсе. А пока большое спасибо за положительный/правильный ответ! - person Mark; 11.08.2015