Question

我有一些正在使用的代码，但它没有完全满足我的要求（不精通js / jquery）。

我正在尝试设置引导导航栏的样式。特别是，我希望它具有背景色，取决于它的切换状态或滚动的页面。我目前拥有它，因此它可以在滚动时正确应用，并且在切换菜单时可以正确应用。但是，当我在切换菜单的情况下滚动浏览，然后在仍在切换菜单的情况下向上滚动回页面时，背景色会下降，并且会再次变为透明。

我可以看到为什么在代码中会发生这种情况，我只是不知道如何正确地创建或组合这些功能，因此两者可以同时工作。

很抱歉，如果描述不正确，则该网站位于我的本地安装上，因此我无法提供该链接，但这是我制作的视频的链接。

为清楚起见，我需要在页面顶部打开切换菜单时应用黑色渐变背景，以使其仍然适用，但在菜单未打开时则不应用。您可以在视频中看到它脱落。

https://drive.google.com/file/d/1FcwEtsJXI6L-A0m1wdmVUiAGmZqxoCcY/view

任何帮助将不胜感激！

它正在使用wordpress引导菜单，下面是我一直在使用的代码：

jQuery(".navbar").on("show.bs.collapse", function() {
    console.log("open")
      jQuery(".navbar").css("background-color", "rgba(0,0,0,0.69)");
  });
  
  jQuery(".navbar").on("hide.bs.collapse", function() {
    console.log("close")
      jQuery(".navbar").css("background-color", "transparent");
  });


  
  jQuery(function() {
    jQuery(window).on("scroll", function() {
        if(jQuery(window).scrollTop() > 50) {
            jQuery(".navbar").css("background-color", "rgba(0,0,0,0.69)");
        } else if (jQuery(window).scrollTop() < 50) {
          
            
           jQuery(".navbar").css("background-color", "transparent");
        }
    });
  });

切换和滚动时更改Boostrap导航栏背景颜色

0 个答案: