Question

为了避免混淆，在您继续阅读之前，这不是＆＃34;有多少像素下降＆＃34;但是，例如，<section id="smaller">然后它会添加一个类。我是javascript的新手，所以请你带着一点点盐。感谢。

我尝试通过向头文件添加新属性类来更改标头。当您的宽度永远不会改变时，以下代码在桌面上正常工作，但如果您在手机和设计上有响应，该怎么办？是的，这正是我需要你帮助的原因。我已经尝试了很多东西，并且不知道如何按我想要的方式进行此设置。我是web dev的新手，这是我最初的几个网站之一。

我的代码现在：

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>，而不是带有标题类或ID的div。
就像我说的那样，它现在可以正常工作，但仅适用于每种屏幕尺寸的固定宽度
我将此代码包含在js文件中，该文件在<body>标记结束之前链接。
＆＃34; 606＆＃34;是发生变化时页面的长度（以像素为单位）

当您到达网页上的某个位置时，是否有办法向标题添加属性？如果不管怎么说可以给我一些指导，那就太好了。非常感谢您阅读本书并享受您一天的其余时间。：）

Answer 1

使用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");
});

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

Answer 2

我已经想出了一种方法.position();。这是我的解释：

#sub-services是我想要获得位置的元素。

el是#sub-services的位置。

而smaller是添加到<header>的一个类。

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

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指出我正确的方向。

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

2 个答案: