Question

您好我真的希望有人可以提供帮助，我已经将一些代码执行了以下操作

在页面加载时，隐藏导航栏显示jumbotron作为第一个元素，当页面向下滚动100px时，静态导航栏淡入淡出，这一切都正常工作，以及我希望它工作的方式。

其次当jumbotron已滚动> 600px时它会逐渐消失，现在我真的只想在移动设备上发生这种情况（一旦它滚动离开页面就隐藏了jumbotron）并且我不确定是否有简单的方法吗？

这是我的代码

$(document).ready(function(){

  if ($(".navbar").length>0) $(".navbar").hide();

  if ($(".navbar").length>100) $(".jumbotron").hide();

  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if(y > 200){
      $(".navbar").fadeIn("slow");
    }
  });

  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if(y > 600){
      $(".jumbotron").fadeOut("slow");
    }
  });

});

Answer 1

bootstrap中有一些类隐藏并显示如下元素：

       <div class="hidden-xs" >hide in mobile</div>
       <div class="hidden-lg" >hide in large windows like laptop</div>
       <div class="show-xs" >Just show in mobile</div>

引导程序中有4个断点：＆＃39; lg＆＃39; ＆＃39; MD＆＃39; ＆＃39; SM＆＃39; ＆＃39; XS＆＃39;

Answer 2

您可以将滚动功能包装在if语句中：

if ($(window).width() < maxWidth){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if(y > 600){
      $(".jumbotron").fadeOut("slow");
    }
  });
}

其中maxWidth是您认为移动设备的宽度。 Bootstrap使用具有预定min-width个断点的媒体查询，因此您可以考虑使用相同的值。

手机只隐藏一个div

2 个答案: