问题：

我如何在粘性的navbar函数（onscroll）和onclick函数中嵌套JS媒体查询？

仲孙华奥

2023-03-14

因此，有一种在JavaScript上使用媒体查询的方法，但它似乎只在调整窗口大小时才起作用，但当它嵌套在onscroll和onclick函数中时就不能很好地工作。

尝试运行此代码并调整窗口大小，它可以工作，但尝试将浏览器窗口的宽度设置为768px，它可以工作，但当您开始滚动时，它开始返回到tablet media query，它将元素颜色设置为tablet模式而不是桌面模式。即使调整窗口的大小，当它嵌套在函数中时也不能很好地工作。我怎么解决这个？尝试在整页中运行它，以便能够调整窗口的大小

null

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>

null

共有1个答案

严修诚

2023-03-14

你想这样？

null

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>

类似资料：

JS中的嵌套函数

问题内容：我试图理解reactjs中的一些概念，但是我无法理解函数的嵌套。我创建了以下示例来调查我的担忧。在下面的示例中，我呈现了一些内容，这些内容的价值来自一系列嵌套函数。但是，出现错误“未捕获的TypeError：无法读取未定义的属性’renderInnerContent’”。您能帮我了解发生了什么以及如何解决此问题吗？我的主要动机是了解如何将事物抽象为不同的功能。问题答案：未在该函数
嵌套媒体查询

问题内容：默认情况下，我想给我的body元素添加绿色边框。在支持视网膜显示的设备上，我要首先检查尺寸。在ipad上，我想给我的身体一个红色边框，在iphone上，我想给它一个蓝色边框。但是像这样嵌套媒体查询是行不通的：问题答案：否。您需要使用运算符并将其写为两个查询。但是，您可以在将编译为CSS的SCSS中执行此操作，但是它将通过展开它们并使用运算符将它们组合在一起。这是一个普遍的问题，一
嵌套函数如何在Python中工作？

问题内容：为什么即使调用时返回并退出，嵌套函数仍会记住第一个值？问题答案：您可以看到它，因为所有源自父函数的变量都被子函数内的实际值替换。这样，无需跟踪父函数的范围即可使子函数正确运行。将其视为“动态创建函数”。这是python中的基本行为，对多个分配也是如此。 Python将其读取为基本上，在对它们执行任何操作之前会先插入值。
Java中的嵌套函数

问题内容： Java编程语言是否有任何扩展使创建嵌套函数成为可能？在很多情况下，我需要创建在另一个方法或for循环的上下文中仅使用一次的方法。到目前为止，尽管用Javascript可以很容易地完成，但我迄今仍无法完成。例如，这无法在标准Java中完成：问题答案： Java 8引入了lambda。该语法可在定义了一种方法的任何接口上使用。因此，您可以将其与一起使用，但不能与一起使用。是jav
嵌套函数中的函数上下文（“this”）

在Javascript中调用顶级函数时，函数中的this关键字引用默认对象（如果在浏览器中，则为窗口）。我的理解是，这是作为方法调用函数的一种特殊情况，因为默认情况下，它是在窗口上调用的（如John Resig的书《JavaScript忍者的秘密》第49页所述）。实际上，下面代码中的两个调用是相同的。到目前为止还不错...这是我不明白的部分：当一个函数嵌套在另一个函数中并在未指定要调用的对象的
ANTLR4-嵌套函数中的参数

我如何在粘性的navbar函数（onscroll）和onclick函数中嵌套JS媒体查询？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档