难以使用Javascript切换媒体查询

我试图在上面的网站上设置菜单的格式，当它处于粘滞模式（即向下滚动）时，因为在某些宽度下，请求报价按钮会被屏幕遮挡。我只在屏幕向下滚动时使用Javascript来执行更改，并使用一个附加的CSS类来移动菜单。不幸的是，它不起作用——虽然我可以使用直接应用于现有类的CSS来移动菜单，但尝试将其与JS绑定以使其特定于滚动并没有任何效果

有人能告诉我哪里出了问题吗

先谢谢你

Javascript

<script type="text/javascript">
$ = jQuery;
$(function() {
    //caches a jQuery object containing the header element
    var header = $(".header-widget");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 20) {
            $(".header-widget").addClass("header-widget-shortheader");
            $(".second-header-widget").addClass("second-header-widget-shortheader");
            $(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");

        } else {
            $(".header-widget").removeClass("header-widget-shortheader");
            $(".second-header-widget").removeClass(".second-header-widget-shortheader");
            $(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
        }
    });
});
</script>

---

移除。仅使用类名

$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");

替换

$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");

$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");

$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");

替换

$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");

$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");

$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");

---

问题出在第6行：

$(window).scroll(function() {

（实际上没有调用scroll上的函数）

解决方案：

$(window).on('scroll', function() {

对于您的设计问题，您可以通过在文件末尾添加以下代码来减小某些屏幕大小的标题宽度：

/wp content/themes/customizer child/style.css

@media screen 
and (max-width:1200px)
and (min-width: 980px) {
  .sticky-enabled .navbar-wrapper {
    margin-left: 0;
  }  
  .sticky-enabled .navbar-wrapper a {
    padding-right: 7px!important;
    padding-left: 7px!important;
  }
}

---

感谢Marian07的支持。这就是我的结局：

/* -----Fixes menu CTA button being cut off by mid size screens----- */

@media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
    margin-left: 0;
  }  
.sticky-enabled .navbar-wrapper a {
    padding-right: 9px!important;
    padding-left: 8px!important;
    font-size: 95% !important;
  }
}
@media screen and (min-width: 1085px) and (max-width:1200px) {
  .sticky-enabled .navbar-wrapper {
    margin-left: 0;
  }  
  .sticky-enabled .navbar-wrapper a {
    padding-right: 3px!important;
    padding-left: 25px!important;
  }
}

---

谢谢，这是我能看到的问题的一部分，但即使进行了更正，980-1189px屏幕上的菜单仍无法滚动？恐怕这也不起作用。我应该补充一点，该脚本用于切换

标题小部件shortheader

和

第二个标题小部件shortheader

类。我想知道第5行

var header=$（“.header小部件”）

可能是问题所在，因为一个不起作用的类更改是

.navbar.nav

，如果有意义的话？@FishOnABicycle打开开发人员控制台（F2）并在代码中添加“调试器”。对不起，我昨天把它关掉了，在问问题之前忘了再打开。现在又开始播放了。在开始观看视频后，我现在意识到播放WP_DEBUG不是你的意思。我正在看这段视频，并试图跟上它，但我必须承认我有点挣扎-任何进一步的帮助解决这个问题将得到感激。谢谢，玛丽安，谢谢你，你已经搞定了。非常感谢-我将把我最后得到的作为一个单独的答案发布。