滚动网站，其中背景保持静止，点击或滚动时内容转换

Question

我正在寻找一个模板或一个地方，可以教如何创建这样的网站，例如：

http://www.refletcommunication.com/en https://www.artistsweb.com/work

页面基本保持不变，但您可以滚动浏览并更改内容。或者点击链接，内容就会发生变化。但背景保持中立。

我希望这是一个有效的问题。我为自己设计了一个投资组合网站，它会产生这种效果，只是不确定它叫什么，所以我可以学习如何编码。它将在主页上有内容，右侧有链接。如果您滚动或单击链接，则内容将转换为新内容。而背景保持静止。

希望这是有道理的！谢谢

Answer 1

如果我正确理解了您的问题，那么我使用的一种方法是将带有 position: absolute 的 div 堆叠在一起，然后只需切换 active 类，该类将指示当前是哪个元素可见，并且此类将具有 z-index: 100 或 1000 或您想要的任何数字，但它必须高于堆叠元素的数量。在 HTML 中，您将类 active 添加到加载页面后可见的元素。然后使用 JS 你将更改具有 active 类的元素。在 JS 中我使用：

jQuery：https://jquery.com/download/
jQuery 鼠标滚轮插件：https://github.com/jquery/jquery-mousewheel

HTML：

<div class="container">
    <div class="vertically-stacked active"> //first visible bannner
        <h1>Hello</h1>
    </div>
    <div class="vertically-stacked">  //visible only if class active is added
        <h1>World</h1>
    </div>
</div>

您可能有无限数量的垂直堆叠元素。

CSS：

.container    //container of vertically stacked elements
{
    position: relative    //or absolute but not static 
}

.vertically-stacked
{
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .25s;   //time which takes to switch the active element
    -moz-transition: all .25s;
    -o-transition: all .25s;
    -webkit-transition: all .25s;
}

.vertically-stacked.active
{
    opacity: 1;
    z-index: 100;
}

JS：

$(document).on('mousewheel', function (e)
{
    var $verticallyStacked = $('.vertically-stacked'),
        oldActive = $verticallyStacked.index($('.vertically-stacked.active')),
        newActive;

    $verticallyStacked.eq(oldActive).removeClass('active');
    if (e.deltaY < 0) //scroll down
    {       
        newActive = oldActive + 1;
    }
    else //scroll up
    {
        newActive = oldActive - 1;
    }
    $verticallyStacked.eq(newActive).addClass('active');
});