javascript - 使 HTML 页面的一部分消失

Question

我在一个网站上工作，其中有一个标题部分占据了整个视口(viewport)高度。要退出此部分，查看者必须单击一个按钮，然后向下滚动到内容。该设计基于 this website .

但是，他们似乎已经“剪切”了页面的顶部，因为离开该区域后您无法向上滚动到那里。这是如何实现的？有一些 jQuery 解决方案，还是全是 CSS？

Answer 1

我查看了页面，得出的结论是交互是基于 JavaScript 的。我为什么这么想？好吧，很简单，因为滚动动画结束时介绍部分 ( <section id="intro"></section> ) 从文档中消失了。

这可以使用 .remove() 来实现jQuery 的功能。此函数从 DOM 中删除一个元素及其子元素。 The documentation can be found here

用于完成此操作的代码可能大致如下所示:

$("#intro").remove()

如果此交互是使用 CSS 完成的，则该元素不会消失，而是会向该元素添加一些内联 CSS(例如 <section id="intro" style="display: none;">)

当然，这一切都是由滚动或点击事件触发的，看起来像这样。

$("#intro").click(function(){
    // Code that changes element opacity as mentioned by Rahul Jain

    // You can use 'this' as the selector since you are inside a function of that same selector
    $(this).remove();
});