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

如何解决使用航点滚动时如何更改固定导航菜单上的背景色JS ES6

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

解决方法

如果您想报废航点插件，则可以使用香草javascript做到这一点，只需使用每个元素的WholeText = input("Add The Text: ") WordSplitUp = [] WordSplitUp.extend(WholeText) IndividualLetters = WordSplitUp ( a,b,c,d,e ) = str(IndividualLetters).split() print(a) 。

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
}

,

看起来您正在将jQuery与Waypoints.js的版本组合在一起，而该版本并不适合jQuery。

目前，您正在使用jQuery选择元素，这将以jQuery对象的形式为您提供结果

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

但是element构造函数上的Waypoint属性期望使用元素而不是对象。因此，您可以使用document.querySelector通过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");
  }
});