Javascript 如何简化navbar函数中的jQuery？

我有一个肮脏的，黑客夫妇jQuery函数为我的导航栏，我需要帮助清理

基本上，我有一个简单的工具栏，当用户滚动到页面上的某个点后，它会改变颜色（因为页面的背景是白色的，菜单项会变为黑色，而工具栏的背景会从透明变为白色）

但是，当单击菜单中的覆盖切换时，客户端希望覆盖为黑色，项目变为白色。我已经用一个很糟糕的方法实现了这一点，但是我的jQuery技能还很不成熟

滚动到某一点后更改颜色：

var scroll_start = 0;
var startchange = $('.nav-null');
var Heightofit = startchange.outerHeight()-100;
$(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
        $('nav.global_nav').css('background-color', 'rgba(255,255,255,1)');
        $('nav.global_nav i').css('color', 'rgba(0,0,0,0.9)');
        $('.logo svg g').css('fill', 'rgba(0,0,0,0.9)');
        $('#trigger-overlay span').css('background-color', 'rgba(0,0,0,0.9)');
    } else {
        $('nav.global_nav').css('background-color', 'transparent');
        $('nav.global_nav i').css('color', 'rgba(255,255,255,1)');
        $('.logo svg g').css('fill', 'rgba(255,255,255,1)');
        $('#trigger-overlay span').css('background-color', 'rgba(255,255,255,1)');
    }
});

单击切换时翻转颜色：

$('#hamburger').toggle(function () {
    $("#hamburger span, nav, nav.global_nav i").addClass("flip");
    $('.logo svg g').css('fill', 'rgba(255,255,255,1)');
}, function () {
    $("#hamburger span, nav, nav.global_nav i").removeClass("flip");
    $('.logo svg g').css('fill', 'rgba(0,0,0,0.9)');
    return false;
});

---

我非常感谢您能深入了解如何最好地合并和/或清理这一混乱局面。

这是我能想到的最好办法

<style>
  nav.global_nav { background-color: rgba(255,255,255,1); }
  nav.global_nav.alt { background-color: transparent; }

  nav.global_nav i { color: rgba(0,0,0,0.9); }
  nav.global_nav i.alt { color: rgba(255,255,255,1); }

  .logo svg g { fill: rgba(0,0,0,0.9); }
  .logo svg g.alt { fill: rgba(0,0,0,0.9); }

  #trigger-overlay span { background-color: rgba(0,0,0,0.9); }
  #trigger-overlay span.alt { background-color: rgba(255,255,255,1); }
</style>

<script>
  ...
  var elems = $('nav.global_nav, nav.global_nav i, .logo svg g, #trigger-overlay span');
  $(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
      elems.addClass('alt');
    } else {
      elems.removeClass('alt');
    }
  }
  ...
  var elems2 = $("#hamburger span, nav, nav.global_nav i");
  var logoElem = $('.logo svg g');
  $('#hamburger').toggle(function () {
    elems2.addClass('flip');
    logoElem.addClass('alt');
  }, function () {
    elems2.removeClass('flip');
    logoElem.removeClass('alt');
  });
</script>

nav.global_nav{背景色：rgba（255255,1）；}
nav.global_nav.alt{背景色：透明；}
nav.global_nav i{color:rgba（0,0,0,0.9）；}
nav.global_nav i.alt{color:rgba（255255,1）；}
.logo svg g{fill:rgba（0,0,0,0.9）；}
.logo svg g.alt{fill:rgba（0,0,0,0.9）；}
#触发器覆盖span{背景色：rgba（0,0,0,0.9）；}
#触发器覆盖span.alt{背景色：rgba（255255,1）；}
...
var elems=$（'nav.global_nav，nav.global_nav i，.logo svg g，#触发器覆盖范围'）；
$（窗口）。滚动（函数（）{
scroll_start=$（this.scrollTop（）；
如果（滚动开始>高度）{
元素addClass（'alt'）；
}否则{
删除类元素（“alt”）；
}
}
...
var elems2=$（“#汉堡包跨度，资产净值，资产净值。全球资产净值i”）；
var logoElem=$（'.logo svg g'）；
$（'#hamburger'）。切换（函数（）{
elems2.addClass（'flip'）；
logoElem.addClass（'alt'）；
}，函数（）{
elems2.removeClass（'flip'）；
logoElem.removeClass（'alt'）；
});

我觉得这一切都不错，不过，如果您像这样以编程方式更改CSS，我可能倾向于将您经常使用的CSS属性设置为常量

const COLOUR_WHITE = 'rgba(255,255,255,1)';
const COLOUR_BLACK = 'rgba(0,0,0,0.9)';

var scroll_start = 0;
var startchange = $('.nav-null');
var Heightofit = startchange.outerHeight()-100;
$(window).scroll(function() {
    scroll_start = $(this).scrollTop();
    if (scroll_start > Heightofit) {
        $('nav.global_nav').css('background-color', BG_COLOUR);
        $('nav.global_nav i').css('color', COLOUR_BLACK);
        $('.logo svg g').css('fill', COLOUR_BLACK);
        $('#trigger-overlay span').css('background-color', COLOUR_BLACK);
    } else {
        $('nav.global_nav').css('background-color', 'transparent');
        $('nav.global_nav i').css('color', COLOUR_WHITE);
        $('.logo svg g').css('fill', COLOUR_WHITE);
        $('#trigger-overlay span').css('background-color', COLOUR_WHITE);
    }
});

$('#hamburger').toggle(function () {
    $("#hamburger span, nav, nav.global_nav i").addClass("flip");
    $('.logo svg g').css('fill', COLOUR_WHITE);
}, function () {
    $("#hamburger span, nav, nav.global_nav i").removeClass("flip");
    $('.logo svg g').css('fill', COLOUR_BLACK);
    return false;
});

---

这样，你可以在一个地方更改“主题”

你能不能请html和cssIt在我看来没有那么凌乱。而且因为没有明显的“正确”答案，例如，它已经在工作了，而且“更干净”这是一个主观的问题，这个问题可能属于代码审查。你正在更新不同元素的不同属性。除了一些链接，这不会太清楚，我不确定事情是否应该改变。抱歉，这太讽刺了。我将删除我的第一条评论。你可以使用CSS选择器来完成这项操作，然后简单地打开一个类包含父元素的元素，类似于jkris在他的回答中所做的。它整理了代码，因为您只需要一行代码来添加/删除类，这意味着您在JavaScript中没有声明随机的样式位，并且可以更轻松地在代码不以任何方式与之交互的元素上重复使用这些样式。谢谢，伙计们，我喜欢第一个b/c，它不太依赖于jQuery，但我不知道jQuery const属性-这是一个很有价值的教训。我会尝试两个。顺便说一句，hugeinc.com上有一个我想要的例子