使用 jQuery Waypoints 在滚动条上跳跃 header

Question

我已将 bootstrap 菜单固定在页面顶部，并在视口底部（在#home-slide)。在（任何）滚动上，我希望固定菜单将背景从透明更改为半灰色，并且滚动按钮也会消失。从现在开始按钮应该一直隐藏，但是当我滚动到顶部时，我需要菜单再次变透明。

为此，我使用 jQuery Waypoints。我使用以下代码实现了这两种效果，但是当我滚动时，菜单跳转，编辑： 更具体地说它闪烁好像菜单一直不在固定位置。当我滚动时，有时看起来好像菜单随页面一起滚动，然后突然跳回固定位置。有时一段时间后开始正常工作。如果我删除以下两行代码，它不会跳转，但我需要为两个事件使用相同的触发器。

EDIT2: 如果我不使用 waypoints 菜单，它也不会闪烁。滚动流畅，菜单始终位于页面中所有其他元素的顶部。

 $("#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;
        }
    }

Bootstrap导航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

如 debugging guide 中所述，使用固定位置元素作为路径点可能会导致错误的时间。路径点元素在文档（客户端 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 });

Answer 2

我找到了解决办法。闪烁不是由 Waypoints 引起的。添加

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

导航解决了问题。

使用 jQuery Waypoints 在滚动条上跳跃 header

Jumping header on scroll using jQuery Waypoints

html

javascript

css

jquery

jquery-waypoints