Bootstrap Nav 仅在移动设备和带滚动条的桌面设备上答案

【问题标题】：Bootstrap Nav Only on Mobile and On Desktop w/ ScrollBootstrap Nav 仅在移动设备和带滚动条的桌面设备上
【发布时间】：2019-11-20 09:46:28
【问题描述】：

我正在尝试让 Bootstrap 4 顶部粘性导航仅出现在移动设备上，仅使用 CSS（d-block d-md-none）就很容易，但在桌面上我而是希望它在用户向下滚动超过某个点时淡入，并在您向上滚动时隐藏。这是我想出来的，但它会导致菜单在桌面加载时短暂显示。

(function ($) {
  $(document).ready(function(){
    $(".navbar").hide();
    $(function () {
        $(window).scroll(function () {
            if($(window).width() >= 768) { 
                if ($(this).scrollTop() > 500) {
                    $('.navbar').fadeIn();
                } else {
                    $('.navbar').fadeOut();
                }
            }
        });
    });
});
  }(jQuery));

它还可以用于添加和删除类，这将防止闪烁，尽管这会导致突然的转换，而且我一开始就无法让它工作：

$(function() {
    var div = $(".navbar");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 200) {
            div.removeClass('d-block').removeClass("d-md-none");
        } else {
            div.addClass("d-block").addClass('d-md-none');
        }
    });
});

非常感谢您的帮助，谢谢！

【问题讨论】：

标签： jquery css bootstrap-4

【解决方案1】：

我能够在加载时复制闪烁的导航栏。发生的事情是 .hide() 在文档完成加载时发生。我们可以通过 css 分配它，以便导航栏最初会显示为隐藏。

可以通过将display:none 添加到导航栏并删除$(".navbar").hide(); 来修复它。

<nav class="navbar navbar-inverse" style="display:none;">
...
</nav>

<script>
(function ($) {
  $(document).ready(function(){
    // remove
    // $(".navbar").hide();
    $(function () {
        $(window).scroll(function () {
            if($(window).width() >= 768) { 
                if ($(this).scrollTop() > 500) {
                    $('.navbar').fadeIn();
                } else {
                    $('.navbar').fadeOut();
                }
            }
        });
    });
});
  }(jQuery));
</script>

这是一个有效的小提琴https://jsfiddle.net/oe5s6z0c/1/ 在这个小提琴中我添加了

<nav class="navbar navbar-inverse" style="position:fixed; display:none; width:100%;">
...
</nav>

【讨论】：

【解决方案2】：

我能够结合使用 JS 和 CSS 媒体查询来完成我想要的。媒体查询确保 JS 仅在桌面浏览器上使用，同时在 JS 添加和删除类时添加一个不错的缓动。

@media (max-width: 768px) {
  .navbar {
      opacity: 1!important;
    }
}

@media (min-width: 768px) {
  .navbar {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
  }
}

(function ($) {
    $(document).ready(function(){
    // scroll functions
    $(window).scroll(function(e) {
        if($(window).width() >= 768) 

            var scroll = $(window).scrollTop();
            if (scroll >= 150) {
                $('.navbar').addClass("navbar-hide");
            } else {
                $('.navbar').removeClass("navbar-hide");
        }

    });

    });

})(jQuery);

【讨论】：