难以使用Javascript切换媒体查询

Difficulty toggling media query using Javascript

本文关键字：媒体 查询 Javascript      更新时间：2023-09-26

链接到网站

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

感谢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;
  }
}
问题在第6行: 
$(window).scroll(function() {

(实际上没有在滚动时调用函数)

解决方案:

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


对于您的设计问题，您可以通过在文件末尾添加以下代码来减少某些屏幕尺寸的标题宽度:/wp-content/themes/customizr-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;
  }
}

删除。只使用类名

$(".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");
相关文章：