Прыжок заголовка при прокрутке с использованием jQuery Waypoints

Question

Я установил меню начальной загрузки в верхней части страницы и расположенную по вертикали кнопку прокрутки .btn-navigate внизу области просмотра (в # home-slide). На (любой) прокрутке я хочу, чтобы фиксированное меню изменило фон с прозрачного на полусерое, а также исчезла кнопка прокрутки. С этого момента кнопка должна оставаться скрытой, но когда я прокручиваю вверх, мне нужно, чтобы меню снова стало прозрачным.

Для этой цели я использую jQuery Waypoints. Я добился обоих эффектов, используя следующий код, но когда я прокручиваю, меню переходит, РЕДАКТИРОВАТЬ: более конкретно, оно мигает, как будто меню все время не находится в фиксированном положении. Когда я прокручиваю, иногда кажется, что меню прокручивается вместе со страницей, а затем внезапно возвращается в фиксированное положение. Иногда через некоторое время это начинает работать правильно. Если я уберу следующие две строки кода, это не произойдет, но мне нужен один и тот же триггер для обоих событий.

EDIT2: он также не мигает, если я не использую путевые точки с меню. Прокрутка плавная, и меню всегда поверх всех других элементов на странице.

 $("#home-slide .btn-navigate").removeClass("pulse animated");
 $("#home-slide .btn-navigate").addClass("fadeOutUp animated2");

HTML:

<header id="masthead">
    <nav class="navbar navbar-fixed-top">
        <div class="container">
            MENU CONTENT
        </div>
    </nav>
</header>
<section id="home-slide">
    <div class="container">
        <h1 class="heading">HEADING</h1>
        <p class="font2">
            TEXT</p>    
        <a href="#" class="btn-navigate animated pulse">Scroll Button</a>
    </div>
</section>

JQuery:

jQuery(document).ready(function ($) {
    $(function () {
        $("#masthead nav").waypoint(function () {
            $("#masthead nav").toggleClass('scrolling');
            $("#home-slide .btn-navigate").removeClass("pulse animated");
            $("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
        }, { offset: '-20px' });        
    });
});

Моя навигация CSS:

#masthead {

    nav {
        min-height: 120px;
        padding-top: 2.727rem;
        background: rgba(51,58,64,0.0);
        -webkit-transition: background-color 0.5s linear;

        .container {
            position: relative;
        }

        .navbar-nav {
            a {
                color: @lms-white;
                font-weight: bold;
                text-transform: none;
                text-shadow: 1px 1px 2px rgba(50, 50, 50, 1);
                padding: 7px 1.17rem;
                border: 2px solid transparent;
                .border-radius(5px);

                &:hover {
                    background: transparent;
                    border: 2px solid @lms-pink;
                }
            }
        }

        .navbar-brand {
            padding: 7px 15px;
        }

        &.scrolling {
            background: rgba(51,58,64,0.9);
            -webkit-transition: background-color 0.5s linear;
        }
    }

Начальная загрузка CSS:

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

Есть идеи, как это решить? Спасибо!

Answer 1

Я нашел решение. Миг не был вызван путевыми точками. Добавление

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;

чтобы нав решил проблему.

Answer 2

Как описано в руководстве по отладке, использование элемента с фиксированной позицией в качестве путевой точки может привести к плохому времени. Положение элемента путевой точки в документе (клиент offsetX/Y) определяет, где он срабатывает, а смещения элементов фиксированной позиции постоянно меняются при прокрутке.

Похоже, у вас уже есть очень хороший статически расположенный элемент, который вы можете использовать вместо этого nav, #masthead сам. Вы также можете внести некоторые изменения в свой код, чтобы посмотреть на direction пользователь прокручивает, когда путевая точка пересекается. Я полагаю, что вы хотите отменить некоторые из этих анимированных состояний, если пользователь прокручивает обратно.

$("#masthead").waypoint(function (direction) {
  $("#masthead nav").toggleClass('scrolling');
  if (direction === 'down') {
    $("#home-slide .btn-navigate").removeClass("pulse animated");
    $("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
  }
  else {
    $("#home-slide .btn-navigate").addClass("pulse animated");
    $("#home-slide .btn-navigate").removeClass("fadeOutUp animated2");
  }
}, { offset: -20 });   

Это можно немного уменьшить, используя вариант toggleClass, который принимает логическое значение в качестве второго аргумента, где, если это логическое значение true Переключатель добавит классы, и если это false классы удалены.

$("#masthead").waypoint(function (direction) {
  $("#masthead nav").toggleClass('scrolling', direction === 'down');
  $("#home-slide .btn-navigate")
    .toggleClass("pulse animated", direction === 'up')
    .toggleClass("fadeOutUp animated2", direction === 'down');
  }
}, { offset: -20 });