时间戳

首页 > 解决方案 > 当浏览器宽度调整到特定大小以上时如何绕过功能

javascript - 当浏览器宽度调整到特定大小以上时如何绕过功能

问题描述

我正在我的一个网站上工作，该网站在页面顶部有一个标题和一个过滤器部分。我要做的是在页面向下滚动时使过滤器部分粘在页面顶部，但前提是设备/浏览器低于特定宽度，在本例中为 1000px。

我的问题是我只能弄清楚如何在调整大小然后刷新后更新浏览器宽度。

document.body.onscroll = scroll;
var navbar = document.getElementById("navbar");
var bodyTop = navbar.offsetTop;
var browserWidth = window.innerWidth;
navbar.innerHTML = browserWidth + " (Current browser width)"

function scroll() {
  if (browserWidth < 1000) {
    if (document.documentElement.scrollTop > 65) {
      navbar.style.position = "fixed";
      navbar.style.top = "0";
    }
    if (document.documentElement.scrollTop < 65) {
      navbar.style.position = "relative";
      navbar.style.top = "0";
    }
  }
};
html,
body {
  margin: 0;
  height: 2000px;
}

#header {
  width: 100%;
  background-color: darkred;
  height: 65px;
  position: relative;
}

#navbar {
  width: 100%;
  height: 85px;
  position: relative;
  background-color: grey;
}
<div id="header"></div>
<div id="navbar"></div>

标签： javascripthtmlcss

解决方案

您可以使用该onresize事件来更新browserWidth窗口大小调整时的值：

document.body.onscroll = scroll;

var navbar = document.getElementById("navbar");
var bodyTop = navbar.offsetTop;
var browserWidth = window.innerWidth;
navbar.innerHTML = browserWidth + " (Current browser width)"

window.onresize = function() {
    browserWidth = window.innerWidth; //update value of browserWidth
}

function scroll() {
  if (browserWidth < 1000) {
    if (document.documentElement.scrollTop > 65) {
      navbar.style.position = "fixed";
      navbar.style.top = "0";
    }
    if (document.documentElement.scrollTop < 65) {
      navbar.style.position = "relative";
      navbar.style.top = "0";
    }
  }
};

推荐阅读