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

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 中散布着具有主样式 类和显示 类的元素。 替代方案 意味着我的 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;
}