无法使用媒体查询隐藏固定菜单

Question

我有一个水平菜单，当你滚动浏览器时它会固定在浏览器的顶部。为了实现它，我使用了 javascript (jquery)。现在我想隐藏该菜单并以特定分辨率显示移动菜单，但是当我将 "display: none" 设置为菜单类时，它只会隐藏原始菜单。
如果我将 .original 或 .menu 设置为 "display:none" 它会隐藏原始静态菜单，并且固定菜单会立即粘在网络浏览器的顶部（您不必滚动）。
将 .cloned 设置为 "display:none" 不会执行任何操作。如何摆脱那个固定的菜单？

脚本：

<script>

        // Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

    </script>

CSS:

@media screen and (max-width:960px){
    .cloned {
        display: none;
    }

    .original {
        display: none;
    }

    .menu {
        display: none;
    }

    #navi {
        display: none;
    }

    #content {
        width: 90%;
    }
}

编辑：

jsfiddle: https://jsfiddle.net/765kadoj/3/

Answer 1

发生这种情况的原因是您的 javascript 在设置后覆盖了您的 css。您有两个选择：

你需要写一些javascript来改变css到display: none对于.clonedclass当屏幕是小于 960px。
您可以使用 !important 覆盖，如下所示：

.cloned { display: none !important; }

但是，我强烈建议使用选项 1，因为 !important 覆盖通常不是最佳做法。有关 !important 的更多信息，请参阅此 article。

无法使用媒体查询隐藏固定菜单

Can't hide fixed menu using media queries

javascript

css

jquery

menu

media-queries

脚本：

CSS:

编辑：