javascript - 难以使用 Javascript 切换媒体查询

Question

Link to site

我正在尝试格式化上述网站上的菜单，当它处于粘滞模式(即向下滚动)时，因为在某些宽度下请求报价按钮被屏幕遮挡。我使用 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>

CSS

/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
@media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
  margin: 40px 22% 0 0;
  float: right;
}
}

Answer 1

感谢 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;
  }
}