如何在导航栏函数中简化jQuery

How to simplify jQuery in navbar functions?

本文关键字：jQuery 函数 导航      更新时间：2023-09-26

我有一个肮脏的，黑客的一对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)');
    }
});

单击toggle时，翻转颜色:

$('#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>

对我来说都很好，尽管，如果你像这样通过编程方式改变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;
});

这样，你可以在一个地方改变"theme"

相关文章：