时间戳

首页 > 解决方案 > 如何在粘性导航栏功能（onscroll）和 onclick 功能中嵌套 JS 媒体查询？

javascript - 如何在粘性导航栏功能（onscroll）和 onclick 功能中嵌套 JS 媒体查询？

问题描述

所以有一种方法可以在 JavaScript 上使用媒体查询，但它似乎只在调整窗口大小时才有效，但当它嵌套在onscrollandonclick函数中时效果不佳。

尝试运行此代码并调整窗口大小，它可以工作，但尝试将浏览器窗口的宽度设置为768px，它可以工作，但是当您开始滚动时，它开始恢复到平板电脑媒体查询，它将元素颜色设置为平板电脑模式而不是桌面模式。即使调整窗口大小，当它嵌套在函数中时，它也不能很好地工作。我该如何解决？尝试在整页中运行它以调整窗口大小

window.onscroll = function() {stickynavbar();}

var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];

var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(min-width: 600px)");

function stickynavbar() {

  function element1Query(desktop){
      if (desktop.matches){
          element1.style.background = "darkred";
      }
      else{
          element1.style.background = "black";
      }
  }
  element1Query(desktop);
  desktop.addListener(element1Query);

  function element1TQuery(tablet){
      if (tablet.matches){
          element1.style.background = "darkblue";
      }
      else{
          element1.style.background = "black";
      }
  }
  element1TQuery(tablet);
  tablet.addListener(element1TQuery);

  function element2Query(desktop){
      if (desktop.matches){
          element2.style.background = "darkgreen";
      }
      else{
          element2.style.background = "gray";
      }
  }
  element2Query(desktop);
  desktop.addListener(element2Query);

  function element2TQuery(tablet){
      if (tablet.matches){
          element2.style.background = "yellow";
      }
      else{
          element2.style.background = "gray";
      }
  }

  element2TQuery(tablet);
  tablet.addListener(element2TQuery);
}
.element1{
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 1000px;
        background: black;
    }
    .element2{
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 1000px;
        background: gray;
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>

</body>
</html>

标签： javascripthtmljquerycss

解决方案

你想要这样吗？

window.onscroll = function() {stickynavbar();}

var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var myBtn = document.getElementsByTagName("button")[0];

var desktop = window.matchMedia("(min-width: 768px)");
var tablet = window.matchMedia("(max-width: 600px)");

function stickynavbar() {

  function element1Query(desktop){
      if (desktop.matches){
          element1.style.background = "darkred";
      }
      else{
          element1.style.background = "black";
      }
  }
  element1Query(desktop);
  desktop.addListener(element1Query);

  function element1TQuery(tablet){
      if (tablet.matches){
          element1.style.background = "darkblue";
      }
      else{
          element1.style.background = "black";
      }
  }
  element1TQuery(tablet);
  tablet.addListener(element1TQuery);

  function element2Query(desktop){
      if (desktop.matches){
          element2.style.background = "darkgreen";
      }
      else{
          element2.style.background = "gray";
      }
  }
  element2Query(desktop);
  desktop.addListener(element2Query);

  function element2TQuery(tablet){
      if (tablet.matches){
          element2.style.background = "yellow";
      }
      else{
          element2.style.background = "gray";
      }
  }

  element2TQuery(tablet);
  tablet.addListener(element2TQuery);
}
.element1{
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 1000px;
        background: black;
    }
    .element2{
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 1000px;
        background: gray;
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="element1" id="element1"></div>
<div class="element2" id="element2"></div>

</body>
</html>

推荐阅读