javascript - 使用航点滚动时如何更改固定导航菜单上的背景颜色（JS ES6）

Question

当有人使用航点滚动它时，我试图更改我的导航菜单（导航栏）的背景颜色。问题是，它没有用。因为“我认为”，是因为我看的视频教程过时了？或者我的代码似乎有问题？我审查了 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();

标签： javascriptecmascript-6jquery-waypoints

Answer 1

如果你想废弃航点插件，你可以使用 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>