javascript - 使显示可见：在移动视图中不使用 Javascript

Question

当到达某个高度并希望始终从移动视图（甚至更好的移动设备）更改显示时，我得到以下代码以淡入粘性菜单：无；显示：块；

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

我正在使用以下代码：

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

Try:

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