如何在使用 Waypoints 滚动时更改固定导航菜单上的背景颜色(JS ES6)

Question

我试图在有人使用 waypoints 滚动我的导航菜单 (navbar) 时更改它的背景颜色。问题是，它不起作用。因为“我认为”，是因为我看的视频教程过时了？或者我的代码似乎有问题？代码我看了10遍，差点斜眼看

这是我看的视频教程的最终代码。

import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';

class StickyHeader {
    constructor() {
        this.siteHeader = $(".site-header");
        this.headerTriggerElement = $(".large-hero__title");
        this.createHeaderWaypoint();
    }

    createHeaderWaypoint() {
        var that = this;
        new Waypoint({
            element: this.headerTriggerElement,
            handler: function() {
                that.siteHeader.addClass("site-header--dark");
            }
        });
    }
}

export default StickyHeader;

如果有人能帮助我，我将不胜感激。这是我的 App.js

import MobileMenu from './modules/MobileMenu';
import RevealOnScroll from './modules/RevealOnScroll';
import $ from 'jquery';
import StickyHeader from './modules/StickyHeader';

var mobileMenu = new MobileMenu();
var revealOnScroll($(".feature-item"), "85%");
var revealOnScroll($(".testimonial"), "60%");
var stickyHeader = new StickyHeader();

Answer 1

如果您想废弃 waypoints 插件，您可以使用 vanilla javascript 做到这一点，只需使用每个元素的 getBoundingClientRect。

class StickyHeader {
  constructor() {
    var that = this;
    this.siteHeader = document.querySelector(".site-header");
    this.headerTriggerElement = document.querySelector(".large-hero__title");
    window.addEventListener('scroll', function() {
      that.createHeaderWaypoint();
    });
  }

  createHeaderWaypoint() {
    var that = this;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var headPosition = this.siteHeader.getBoundingClientRect();
    var screenPosition = this.headerTriggerElement.getBoundingClientRect();

    if (headPosition.bottom >= screenPosition.top) {
      this.siteHeader.classList.add("active");
    } else {
      this.siteHeader.classList.remove("active");
    }
  }
}

temp = new StickyHeader();

html,
body {
  height: 100px;
}

body {
  padding: 0;
  margin: 0;
}

.site-header {
  background: red;
  height: 100px;
  position: fixed;
  top: 0;
  width: 100%;
}

.large-hero__title {
  background: blue;
  height: 100px;
  margin: 1400px 0;
}

.site-header.active {
  background: black
}

<div class="site-header">header</div>
<div class="large-hero__title">hero!</div>

Answer 2

看起来您正在将 jQuery 与不适用于 jQuery 的 Waypoints.js 版本结合使用。

目前您正在 select 使用 jQuery 处理元素，这将为您提供 jQuery 对象形式的结果

$(".site-header");
// This will result in:
{
  0: <div class=".site-header">...</div>
}

但是 Waypoint 构造函数中的 element 属性需要一个元素而不是一个对象。因此，您可以使用 document.querySelector.

select 具有 Vanilla JavaScript 的元素

也使用 classList.add 而不是 addClass 因为你现在处理的是纯 JS 元素而不是 jQuery 对象。

import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';

class StickyHeader {
    constructor() {
        this.siteHeader = document.querySelector('.site-header');
        this.headerTriggerElement = document.querySelector('.large-hero__title');
        this.createHeaderWaypoint();
    }

    createHeaderWaypoint() {
        var that = this;
        new Waypoint({
            element: this.headerTriggerElement,
            handler: function() {
                that.siteHeader.classList.add("site-header--dark");
            }
        });
    }
}

export default StickyHeader;

或者使用框架的 jQuery 变体并像这样使用它。

var $siteHeader = $(".site-header");
var $headerTriggerElement = $(".large-hero__title");

$headerTriggerElement.waypoint({
  handler: function() {
    $siteHeader.addClass("site-header--dark");
  }
});

如何在使用 Waypoints 滚动时更改固定导航菜单上的背景颜色(JS ES6)

How to Change Background-Color on my Fixed Navigation Menus when Scrolling Using Waypoints(JS ES6)

javascript

jquery-waypoints

ecmascript-6