当我的导航位于页面顶部时,我正在使一个元素可见。如果页面达到 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);
最佳答案
您检查滚动位置的方式不对 - 我认为您希望当当前滚动大于 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 容器的大小,这会在每个调整大小断点处造成困惑)
关于javascript - 如何结合JS媒体查询和滚动监听?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56618889/