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

Answer 2

删除。仅使用班级名称

$(".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");

Answer 3

问题出在第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;
  }
}

难以使用Javascript切换媒体查询

3 个答案: