添加类与删除类以在网页上显示元素

Question

当前设计

在我正在设计的网站中，我有一些最初会隐藏的元素，直到用户需要才能看到它们。例如，他们已在页面上滚动到所需的高度。

目前，这可以通过JavaScript添加类line.classList.add('show-header-line');

来实现

将在元素的主要样式旁边定义CSS中的哪个。该类的show变体仅包含使元素可见所需的属性opacity: 1。元素的主要样式将包含最初隐藏元素所需的相反属性opacity: 0.

替代

当然，这可能相反。使用一个旨在隐藏最初在html中设置的元素的类，然后在JavaScript需要时删除。

HTML 的

<div class="header-line hide-header-line" />

JS

line.classList.remove('hide-header-line');

注意

当然我可以在JavaScript中直接添加和删除样式（不需要额外的类），但这似乎更糟糕。关于缺乏关注点分离。

问题

我的当前方法表示生成的渲染DOM中充斥着具有主要样式类和 show 类的元素。 替代表示我的html文件中充斥着带有主要样式类和隐藏类的元素。这被认为是更好的做法？还有另一种更清洁的方法吗？

Answer 1

我会强烈建议不要使用opacity:0，而是使用display: none。原因是opacity: 0的元素仍占用标记中的空格，而display: none会将元素添加到DOM中，但它不会在标记中呈现（如果这有意义的话） ）。

Here是一个更详细的解释

此外，使用滚动的示例通过了您说的某些点，我就是这样做的，注意代码未经测试。

window.addEventListener('scroll', function(){
  document.querySelector('#navigation').classList[this.scrollTop > 200 ? 'add' : 'remove']('fixed-nav');
});

CSS

.fixed-nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}