使用jQuery Waypoint滾動滾動標題

Question

我在頁面頂部固定了引導菜單，並在視口底部（在＃home-slide中 ）固定定位了滾動按鈕.btn-navigate 。 在（任何）滾動上，我希望固定菜單將背景從透明更改為半灰色，並且還希望滾動按鈕消失。 從現在開始，該按鈕應該一直處於隱藏狀態，但是當我滾動到頂部時，我需要菜單再次變得透明。

為此，我正在使用jQuery Waypoint。 我已經使用下面的代碼實現了這兩種效果， 但是當我滾動時，菜單會跳轉 ， 編輯： 更具體地說，它會閃爍，好像菜單始終不在固定位置。 當我滾動時，有時菜單似乎隨着頁面滾動而出，然后突然跳回固定位置。 有時過一會兒便開始正常工作。 如果刪除以下兩行代碼，這不會跳動，但是兩個事件都需要相同的觸發器。

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

我找到了解決方案。 閃爍不是由Waypoint引起的。 添加

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

導航解決了這個問題。

Answer 2

如調試指南中所述，將固定位置的元素用作航路點可能會導致時間浪費。 航點在文檔中的位置（客戶端offsetX/Y ）確定了觸發的位置，並且固定位置元素的偏移在滾動時不斷變化。

看起來您已經擁有一個非常好的靜態定位元素，可以代替#masthead本身nav使用。 您可能還需要對代碼進行一些更改，以查看穿越航路點時用戶滾動的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則toggle將添加類；如果為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 });