Прикрепленный навигационный элемент прыгает во время прокрутки

В Firefox, особенно, я столкнулся с проблемой, я не могу понять, как ее исправить.

На следующей странице при прокрутке страницы перескакивает несколько раз - в основном на меньших экранах, где страница не отображается в полном размере. Вы можете реплицировать эту проблему, сделав свой браузер меньше, чем страница, поэтому вам нужно прокручивать.

Это на этой странице: http://www.nucanoe.com/frontier-accessories/

Если я отключу position:fixed в селекторе навигации, она исправляет проблему - но нам нужно, чтобы навигация была липкой. Есть ли решение исправить это? Я думаю, нам, возможно, придется каким-то образом использовать jQuery.

Заранее спасибо!

Ответ 1

Увидев, что вы просите о помощи в другом ответе, я попытаюсь объяснить вам более четко.

Проблема

Ваша проблема заключается в том, когда вы добавляете position:fixed на панели навигации, она удаляет ее со своего места и вставляет ее вверху страницы. Вот почему остальная часть вашего контента вскакивает - потому что панель навигации не там, где она была.

Как исправить

Вы можете обойти это, обернув свой навигационный элемент новым вызовом div let, который он представляет собой nav-wrapper, и установите его высоту так же, как ваш навигационный элемент. Они известны как элементы-заполнители. Эта новая оболочка и ваша первоначальная панель навигации всегда должны быть одинаковой высоты для того, чтобы "прыжок" исчез.

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

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

Предложение

Из того, что я вижу на вашем сайте, будет большой пробел, когда панель навигации была до тех пор, пока новая фиксированная навигация не достигнет этой точки и не закроет ее. Что вам нужно, это немного jQuery, чтобы выяснить, где сделать навигацию фиксированной и где ее скрыть. Я объясню:

// cache the element
var $navBar = $('.your-original-nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});

Возможно, вы захотите добавить в этот пример дополнительные функции, так как это очень, очень просто. Вероятно, вы захотите пересчитать смещения при изменении размера окна в качестве одного дополнения.

Демо-версия

Это небольшая демонстрация, которая могла бы вам помочь - мне было скучно и было полезно :)

Ответ 2

Вы должны иметь местозаполнитель, когда ваш навигатор переходит от фиксированного. Поэтому вам нужно создать новый div.

jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
    jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());


    jQuery(".nav").wrapInner('<div class="nav-inner"></div>');

Не забудьте изменить ".nav", "nav-inner" и "nav-placeholder" по вашему желанию.

Для полнофункционального липкого навигатора проверьте мой сайт: http://www.swegre.se/

Ответ 3

Сделано так: теперь добавлен элемент перед навигацией:

<div class="nav-placeholder"></div>

И jquery:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>150){
            $(".nav-placeholder").height($(".nav").outerHeight());
        } else {
            $(".nav-placeholder").height(0);
        }
    });
</script>

Когда я прокручиваю вниз до 150, заполнитель получает высоту навигатора, когда я снова прокручиваю, я установил его высоту на 0.

Вот скрипка: https://jsfiddle.net/herrfischerhamburg/562wu62y/