Javascript 在页面中的不同点添加类/ID

为了避免混淆，在继续阅读之前，这不是“下降多少像素”，而是在，例如，

处，它将添加一个类。我是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();

有几件事我需要澄清，如果你有点困惑：

• 标题是实际的
  而不是带有标题类或id的div
• 正如我所说的，这现在确实有效，但只对每个屏幕大小的固定宽度有用
• 我将此代码包含在一个js文件中，该文件在
  标记结束之前链接
• “606”是发生更改时页面的长度（以像素为单位）

---

当您到达网页上的某个位置时，是否有方法向标题添加属性？如果能给我一些指导，那就太好了。非常感谢您阅读本文，祝您度过愉快的一天。：）

使用

element.getBoundingClientRect（）

检索对象的屏幕位置信息。这将为您提供一个包含底部、高度、左侧等的对象，对于您的任务，您可能需要使用

top

和

height

。与

window.innerHeight

结合使用，您可以编写所需的代码

window.addEventListener('scroll', function() {
    var r = header.getBoundingClientRect();
    if (r.top < 300)
        header.setAttribute("class", "smaller");
    else
        header.removeAttribute("class");
});

window.addEventListener（'scroll'，function（）{
var r=header.getBoundingClientRect（）；
如果（右上角<300）
header.setAttribute（“类”、“较小”）；
其他的
标题。删除属性（“类”）；
});

---

不过，可能有更好的方法可以做到这一点，看看“css媒体查询”，它们几乎提供了使页面响应所需的任何内容。

我已经找到了一种使用

.position（）的方法。以下是我的解释：

#子服务
是我想要得到的职位

el
是
子服务的位置

较小的
是添加到
的类


以下是我在网站中使用的完整代码：

var el = $( "#sub-services" );
var position = el.position();

function init() {
    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header");
        if (distanceY > position.top) {
            header.setAttribute("class", "smaller");
        } else {
            header.removeAttribute("class");
        }
    });
}
window.onload = init();

使用jquery做这件事要容易得多。感谢@caramba为我指明了正确的方向。
要求实施会不会太过分P对不起，现在有点不知所措。非常感谢。谢谢我添加了一些示例实现，我不知道您想要的是什么，但是这段代码向屏幕上超过300px的元素添加了一个类。小贴士：当你刚接触JS时，看看jQuery，它会对优雅地做事有很大帮助。@caramba发布的另一个答案帮助我解释了我的目标=如果你首先检查元素在页面上的位置并将其设置为
distance
，你仍然可以使用其余的代码。这是一种方法，但是它应该帮助你理解。。。有希望地。谢谢你的回答，我会研究并尝试一下。我已经在帖子中添加了一个有效的解决方案。谢谢你的时间！非常感谢你所做的一切。这是因为你的评论很有帮助，而不是“CSS媒体查询”。老实说，我不想让人讨厌。我不能对评论进行投票。：/+我得等两天才能让我的答案被接受。