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

Question

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

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

页面基本上保持不变，但您可以滚动浏览并更改内容。或单击链接和内容更改。但背景保持中立。

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

希望有道理！谢谢

Answer 1

如果我正确理解你的问题，那么我使用的一种方法是将div与position: absolute叠加在一起，然后只需切换活动类，它将指示当前可见的元素，此类将具有z-index: 100或1000或任何数字你想要的但它必须高于堆叠元素的数量。在HTML中，您将把活动的类添加到加载页面后可见的元素。然后使用JS，您将更改具有活动类的元素。在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');
});