Question

简单的向下滚动->使用jQuery更改导航栏顺序。

$(document).ready(function () {
    'use strict';
     var c, currentScrollTop = 0,
     navbar = $('nav');
     $(window).scroll(function () {

        currentScrollTop = a;
        if (c > 650) {
          navbar.addClass("scrollUp");
          console.log("Showing navbar", c, navbar.hasClass("scrollUp"));

        } else if (c < 700) {
          navbar.removeClass("scrollUp");
        }
        c = currentScrollTop;
    });
}

控制台日志输出当前滚动条，并在需要时显示“ false”。上课没有加起来。 Fyi我对jQuery很不好，这是我的react应用程序中唯一的东西。 CSS中的scrollUp向nav添加了背景颜色过渡，使其不透明。我注意到有时可以正常工作，有时不能正常工作，而且我无法确定问题所在。尚未看到它工作了一段时间。

奖金：

$("#toProjects").click(function() {
      $('html, body').animate({
          scrollTop: $("#projects").offset().top -75
      }, scrollSpeed);
      return false;
  });

此scrollTo函数不能正常工作。

HTML：

<head>
<script language="javascript" src="./jquery.js"></script>
</head>

CSS：

.navbar.scrollUp {
  background-color: #000000;
  transform: background-color 0s ease 0s;
}

Answer 1

您正在将currentScrollTop设置为a，但从未定义a。

编辑：我发现您网站上的代码与此处发布的代码不同。
您没有正确连接到导航栏。试试这个吧。

var c, currentScrollTop = 0, navbar = $('#navbar');

$('nav')正在寻找名称为“ nav”的元素，其中的页面上不存在。与调用$('div')或document.querySelector('div')相同。

$('#navbar')获取页面上id属性设置为navbar的元素。

这解决了该类未添加的问题，但我认为您需要稍微使用CSS才能真正看到影响的发生。

Answer 2

该问题已通过将jQuery代码直接集成到React组件内的ComponentDidMount（）函数中而得以解决。这样，它可以重新接合并正常工作

jQuery不会向元素添加类

2 个答案: