javascript - 如何结合JS媒体查询和滚动监听？

Question

当我的导航位于页面顶部时，我正在使一个元素可见。如果页面达到 max-width: 900px;，我希望该元素被隐藏。我试过使用 modernizer 进行 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

您检查滚动位置的方式不对 - 我认为您希望当当前滚动大于 Logo 顶部时 Logo 消失，而不是小于。

我添加了一个 msgS div (仅用于演示目的)，它将根据菜单顶部的静态值向您显示当前滚动值。我还在菜单位置添加了一个 100 像素的模糊因子，以便在当前滚动条到达该位置时在演示中更加清晰。 我在编写代码时自己使用这些临时 msg div，然后在整理好代码并准备好投入生产时删除它们。

这就是您在 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>

更新:

抱歉，我自己的媒体查询有点倒退 - 我想您希望 Logo 在屏幕尺寸 < 900 像素时显示，如果宽度超过 900 像素则隐藏，是吗？

我添加了一个 msgM div，这样您就可以看到媒体查询的启动——但是为演示获得最佳宽度有点困难。我最终将 500 像素定为可以演示的宽度 (StackOverflow 会在浏览器窗口调整大小时调整其 StackSnippets 容器的大小，这会在每个调整大小断点处造成困惑)