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

为避免混淆，在您阅读之前，这不是“多少像素向下”，而是在例如<section id="smaller">那么它会添加一个类。我是JavaScript新手，所以请带上一点盐。谢谢。在页面的不同点添加类别/ ID

我试图通过添加一个新的属性类到头文件来改变头。以下代码在桌面上可以正常工作，但宽度永远不会发生变化，但如果您的手机和设计有响应，该怎么办？是的，这正是我需要你帮助的原因。我已经尝试了很多东西，不知道如何获得像我想要的设置。我是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。
就像我说的，这不，现在工作，但仅适用于固定宽度为每个屏幕尺寸
我包括在其上只是<body>标签结束前链接的js文件的代码非常有用。
“606”的时候，变化是发生在像素的长度向下的页面

有没有一种方法，当你到达网页上的某个地方的属性添加到头？如果反正可以给我一些指导，那会很棒。感谢大家阅读本文并享受你的余生。 :)

来源

2016-04-04 hermitspike

使用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媒体查询”，他们提供了几乎所有的东西你可能需要让你的网页响应。

来源

2016-04-04 10:24:20 ZPiDER

请求实施是否太多了？：P对不起，有点不知所措。这将非常感激。谢谢！ – hermitspike

我添加了一些示例实现，我不确切知道你要做什么，但是这段代码向屏幕上超过300px的元素添加了一个类。提示：当你是JS的新手时，看看jQuery，这对于优雅地处理事情会有很大的帮助。 – ZPiDER

@caramba发布的另一个答案帮助我解释了我的目标=如果您首先检查页面中的元素的位置并将其设置为'distanceY'，那么您仍然可以使用其余的代码。这是一种做法，但它应该有助于你理解...希望。感谢您的回答，我会研究它并尝试一下。 – hermitspike

我想通过.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指引我朝着正确的方向前进。

来源

2016-04-04 11:25:06 hermitspike

感谢一切。 – hermitspike

这是你的评论是有帮助的，而不是“CSS媒体查询”。老实说并不想成为可恨的人。我不能赞成评论。：/ +我必须等待2天才能接受我的答案。 – hermitspike

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

回答

相关问题