在移动视图中使显示可见：none 和 Javascript

Question

我得到了以下代码，当达到一定高度时，它会在粘性菜单中淡入淡出，并希望它始终从移动视图（或更好的移动设备）更改显示可见：none；显示：块；

用户第一次从宽度小于 768px 的设备加入时出现问题，直到 he/she 向下滚动菜单才会出现。

我正在使用以下代码：

HTML

<nav id="menufijo" style="display:none;" class="navbar navbar-default navbar-fixed-top">

// Everything that's inside

</nav>

JAVASCRIPT

<script>
        $(window).scroll(function(){
        var y = $(window).scrollTop();
        var z = $(".top-header")
        if(y > z.outerHeight() ){
          $("#menufijo").fadeIn("slow");
         } else if (window.matchMedia("(max-width: 768px)").matches) {
          $("#menufijo").style.display = "block";
        } else {
          $("#menufijo").fadeOut("fast");
        }});
</script>

Answer 1

尝试：

$(window).scroll(function(){
    var y = $(window).scrollTop();
    var z = $(".top-header")
    if (!window.matchMedia("(max-width: 768px)").matches) {
        if (y > z.outerHeight() ) {
            $("#menufijo").fadeIn("slow");
        } else {
            $("#menufijo").fadeOut("fast");
        }
    }
});
$(function() {
    if (window.matchMedia("(max-width: 768px)").matches) {
        $("#menufijo").show();
    }
});

在移动视图中使显示可见：none 和 Javascript

Make Visible a display: none with Javascript in Mobile View

javascript

css

responsive-design

display