如何将元素设置为固定全屏

Question

为了说清楚，我希望有一个全屏标题。在动态滚动（单个或多个滚动）上，当屏幕向下滚动时，整个标题应向上滚动消失。反之亦然，如果用户从内容顶部滚动更多，则标题应完全向下滚动全屏。

我可以使用css吗？我已经看到这个设计在AWWWARDS.com

提交的位置上更常用

Answer 1

简短回答：不。如果我理解得很好，你想要一个parrallax效果，其中一个滚动将滚动到第一个锚点。

对于全屏标题，请使用：

<div class="fullscreen">
    <img src="test.jpg">
</div>

<style>
.fullscreen{
width:100%;
height:100vh;
}

.fullscreen img{
min-width:100%;
min-height:100%;
height:100%;
width:100%;
object-fit:cover;
}
</style>

Answer 2

我不确定我是否正确理解了你的问题。正如我从您提供的示例中所理解的那样，您希望导航栏在用户向下滚动时粘在页面顶部（当用户向上滚动时，它会回到原始位置）。

有三种方法可以做到这一点：

使用Zurb Foudation（简单方法）

• 从here下载Zurb Foundation并将其链接到您的网站。
• 按照this page上的说明制作粘性导航栏。

使用JQuery（最好的方法）

制作一个简单的HTML页面，如下所示：

<div class="content-wrapper">
    <div class="header">
        Header
    </div>
    <div class="nav">
        Navigation
    </div>
    <div class="page-content">
        <p>This is random content, I am too lazy to copy and paste lorem ipsum text here... but you get the point. </p>
    </div>
</div>

在CSS中定义“粘性”类：

.sticky {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 100;
    border-top: 0px;
    }

添加以下JQuery代码：

$(document).ready(function() {
var topStickyNav = $('.nav').offset().top;

var navSticky = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > topStickyNav) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};

navSticky();

$(window).scroll(function() {
    navSticky();
});
});

CSS ONLY方式（不可行）

• 此方法仅适用于Chrome和Safari等Webkit浏览器。
• 您需要先在浏览器中启用实验性WebKit功能。

现在只需在CSS中使用以下代码：

.nav {
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
}