为避免混淆，在您继续阅读之前，这不是“向下多少像素”，而是例如 <section id="smaller">。然后它会添加一个类。我是 javascript 的新手，所以请对它持保留态度。谢谢。
我正在尝试通过向头文件添加新的属性类来更改头文件。当您的宽度从不改变时，以下代码在桌面上可以正常工作，但是如果您在手机上并且您的设计是响应式的呢？是的，这正是我需要你帮助的原因。我已经尝试了很多东西，但不知道如何按照我的意愿进行设置。我是网络开发新手，这是我最初的几个网站之一。
我现在的代码:
function init() {
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header");
if (distanceY > 606) {
header.setAttribute("class", "smaller");
} else {
header.removeAttribute("class");
}
});
}
window.onload = init();
我需要澄清几件事，和/或如果您有点困惑:
- 标题是实际的
<header>不是带有 header 类或 ID 的 div。 - 就像我说的，这现在确实有效，但只对每个屏幕尺寸的固定宽度有用
- 我将此代码包含在一个 js 文件中，该文件在
<body>结束之前链接标签。 - “606”是发生变化时页面向下的长度(以像素为单位)
有没有办法在你到达网页的某个地方时，在标题中添加一个属性？如果无论如何可以给我一些指导，那就太好了。非常感谢您阅读本文并享受接下来的一天。 :)
最佳答案
使用 element.getBoundingClientRect() 检索对象的屏幕位置信息。这将为您提供一个包含 bottom、height、left 等的对象，对于您可能想要使用 top 和 height 的任务。结合 window.innerHeight，您可以根据需要编写代码。
window.addEventListener('scroll', function() {
var r = header.getBoundingClientRect();
if (r.top < 300)
header.setAttribute("class", "smaller");
else
header.removeAttribute("class");
});
但是，可能有更好的方法来做到这一点，看看“css 媒体查询”，它们几乎提供了使页面响应所需的一切。
关于javascript - 在页面的不同点添加类/ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36399792/