Question

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

但是，他们似乎已经削减了＆＃39;页面的顶部，因为您离开该区域后无法向上滚动。这是如何实现的？是否有一些jQuery解决方案，还是全部是CSS？

Answer 1

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

这可以使用jQuery的.remove()函数实现。此函数从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();
});

Answer 2

它是一个混合物：在按钮的click() - 方法中，您将标题的div设置为display:none;，例如$('#button').click(function(){$('#header').hide();});

Answer 3

在点击和鼠标滚轮上，它们会触发一个动画，该动画会将该部分的不透明度从1更改为0.完成动画后，它们会永久删除该元素

$('portion-selector').remove();

使HTML页面的一部分消失

3 个答案: