Question

当导航栏位于页面顶部时，我当前正在显示一个元素。如果页面转到max-width: 900px;，我希望该元素被隐藏。我曾尝试对JS媒体查询使用现代化器，但似乎无法正常工作。

代码：

var a = $(".menu").offset().top;

function scrollListener(){
  if($(document).scrollTop() > a)
  {$('.hidden-logo').css({"opacity": "1","display": "block"});
   $('.menu').css({"margin-left": "-130px"})
  } else {
    $('.hidden-logo').css({"opacity": "0","display": "none"});
    $('.menu').css({"margin-left": "0px"})
  }
};

$(document).scroll(scrollListener);

Answer 1

您以错误的方式检查滚动位置-我认为您希望徽标在当前滚动大于徽标顶部而不是小于顶部时消失。

我添加了一个msgS div （仅出于演示目的），它将向您显示当前滚动值与菜单顶部静态值的相对比。我还向菜单位置添加了100px软糖系数，以使演示在当前滚动到达该位置时更加清晰。 我在编写代码时会使用这些临时msg自己进行分割，然后在我将所有排序并准备好用于生产时将其删除。

这就是您需要检查javascript中的媒体查询的全部内容：

var winmed = window.matchMedia("(max-width: 700px)");
if (winmed.matches){ //do something }

这可以完全像滚动侦听器那样进入侦听器功能。

var gloShowLogo = true;
var a = $(".menu").offset().top;
var fudge = 100; //100px fudge factor so can SEE div disappear

function scrollListener(){
  updateScrollMsg();
  var currScroll = $(document).scrollTop();
  var topOfMenu = a+fudge;
  if( gloShowLogo && currScroll < topOfMenu ){
    $('.hidden-logo').css({"opacity": "1","display": "block"});
    $('.menu').css({"margin-left": "-130px"})
  } else {
    $('.hidden-logo').css({"opacity": "0","display": "none"});
    $('.menu').css({"margin-left": "0px"})
  }
};
function resizeListener(){
  updateMediaMsg();
  var winmed = window.matchMedia("(max-width: 500px)");
  if (winmed.matches){
    $('.hidden-logo').css({"opacity": "1","display": "block"});
    gloShowLogo = true;
  } else {
    $('.hidden-logo').css({"opacity": "0","display": "none"});
    gloShowLogo = false;
  }
}
$(window).scroll(scrollListener);
$(window).resize(resizeListener);

function updateScrollMsg(){
  $('#msgS').html( $(document).scrollTop() +' // ' + $(".menu").offset().top );
}
function updateMediaMsg(){
  var winmed = window.matchMedia("(max-width: 500px)");
  var medmsg = (winmed.matches) ? '< 500' : '> 500';
  console.log(medmsg);
  $('#msgM').html(medmsg);
}

.menu{background:green;text-align:center;}
.content{height:200vh;background:palegreen;text-align:center;}

.hidden-logo{position:fixed;top:1vh;right:1vw;padding:15px; background:pink;z-index:2;}


#msgS{position:fixed;top:0;left:0;padding:10px;background:wheat;z-index:2;}
#msgM{position:fixed;top:40px;left:0;padding:10px;background:lightblue;z-index:2;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="menu">Menu Div</div>
<div class="content">Lengthy content Div..<br><br><br><br>100<br></div>
<div class="hidden-logo">LOGO</div>
<div id="msgS"></div>
<div id="msgM"></div>

更新：

抱歉，我自己对媒体进行了查询-我认为您希望徽标在屏幕尺寸<900px时显示，并且如果宽度超过900px则隐藏，是吗？

我添加了一个msgM div，以便您可以观看媒体查询，但是要获得演示的最佳宽度有点困难。我最终将宽度设置为500px，可以将其演示为（随着浏览器窗口大小的调整，StackOverflow会调整其StackSnippets容器的大小，这会使它们在每个调整大小的断点处产生混乱）

如何合并JS媒体查询和滚动侦听？

1 个答案:

更新：