通过 window.matchMedia 将我的 scrollTop() 方法链接到媒体查询答案

【问题标题】：Link my scrollTop() method to media queries via window.matchMedia通过 window.matchMedia 将我的 scrollTop() 方法链接到媒体查询
【发布时间】：2019-11-05 20:48:34
【问题描述】：

嘿，我是 js 新手。我想通过 JS (window.matchMedia) 将我的 scrollTOp 方法链接到媒体查询。

<script>
$(document).ready(function(){
            $(window).scroll(function() { 
                if ($(document).scrollTop() > 458) { 
                    $(".menu a").css("background-color", "#f8f8f8"); 
                    $(".menu").css("display", "none");                    
                    $(".sidenav").css("display", "block");
                    $(".closebtn").css("display", "block");
                } 
else {
                $(".menu a").css("background-color", "#666");
                $(".menu").css("display", "block"); 
                $(".sidenav").css("display", "none");
                $(".closebtn").css("display", "none");
            }
            });
        });
</script>

我不知道怎么做，请帮忙:)

【问题讨论】：

标签： javascript media-queries navbar scrollto matchmedia

【解决方案1】：

如果我理解正确，您想检查您的$(document).scrollTop() > 458 是否与媒体查询匹配。

为此，您只需添加：

if ( $(document).scrollTop() > 458 && window.matchMedia("MEDIA_QUERY_HERE").matches){
    ....
}

有关 window.matchMedia here 和逻辑“与”运算符 here 的更多信息。

【讨论】：