CSS 如何将固定菜单添加到视差网站布局
CSS how to add fixed menu to parallax website layout
我正在尝试制作一个具有固定菜单栏的视差网站,但不知道如何将菜单栏固定在页面顶部。我尝试了不同的位置值,但其中 none 似乎有效
这里真的需要一些帮助!我卡住了..免费做这件事,而且是为了一个好人,我肯定会感激他!
https://jsfiddle.net/p3osoddq/
CSS
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
font-family: "Arial, Helvetic Neue, Helvetic, monospace";
font-weight: normal;
font-size: 16px;
}
.navigation {
position: relative;
top:0;
background-color:white;
width:100%;
height:120px;
}
.block-one, .block-two, .block-three {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.block-one {
background-color: blue;
min-height: 100%;
}
.block-two {
background-color: green;
min-height: 70%;
}
.block-two-header {
position: relative;
background-color: #ffffff;
color: #777777;
min-height:30%;
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
}
.block-two-header h3 {
padding-bottom:20px;
text-align: center;
}
.block-two-header p {
text-align: center;
line-height: 25px;
padding: 0px 50px;
}
.block-three {
background-color: red;
min-height: 400px;
}
HTML
<!doctype html>
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet"/>
<title>Home</title>
</head>
<body>
<div class="navigation">
</div>
<div class="block-one">
</div>
<div class="block-two-header">
<span>
<h3>Parallax Demo</h3>
<p>
Parallax scrolling is a web site trend where the background content is moved at a different speed than the
foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed
posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit
dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur
aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus
vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan
fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam
maecenas, porta porttitor placerat leo.
</p>
</span>
</div>
<div class="block-two">
</div>
<div class="block-three">
</div>
<div class="block-one">
</div>
</body>
</html>
在您的 css 中编辑此内容。将 padding-top
添加到 body 不会隐藏视差的上半部分。
这是工作 fiddle
body{
padding:120px 0 0 ;
}
.navigation {
position:fixed;
z-index:100;
top:0;
background-color:white;
width:100%;
height:120px;
}
尝试 position:fixed
,页眉部分总是在顶部
.navigation {
position:fixed;
z-index:100;
top:0;
background-color:white;
width:100%;
height:120px;
}
尝试工作 fiddle
我建议将位置绝对更改为固定。试试看有什么不同
使用Bootstrap,可以在网页的顶部有一个导航栏,使用自定义CSS,可以固定它的位置,这样当你向下滚动时,整个div
将具有属性 position:fixed
.
代码如下:
在 <head>
中,包含 CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
我有同样的问题
使用"sticky" 位置解决问题
body {
margin: 0;
padding: 0 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
position: sticky;
top: 0px;
height: auto;
width: 100%;
}
我正在尝试制作一个具有固定菜单栏的视差网站,但不知道如何将菜单栏固定在页面顶部。我尝试了不同的位置值,但其中 none 似乎有效
这里真的需要一些帮助!我卡住了..免费做这件事,而且是为了一个好人,我肯定会感激他!
https://jsfiddle.net/p3osoddq/
CSS
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
font-family: "Arial, Helvetic Neue, Helvetic, monospace";
font-weight: normal;
font-size: 16px;
}
.navigation {
position: relative;
top:0;
background-color:white;
width:100%;
height:120px;
}
.block-one, .block-two, .block-three {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.block-one {
background-color: blue;
min-height: 100%;
}
.block-two {
background-color: green;
min-height: 70%;
}
.block-two-header {
position: relative;
background-color: #ffffff;
color: #777777;
min-height:30%;
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
}
.block-two-header h3 {
padding-bottom:20px;
text-align: center;
}
.block-two-header p {
text-align: center;
line-height: 25px;
padding: 0px 50px;
}
.block-three {
background-color: red;
min-height: 400px;
}
HTML
<!doctype html>
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet"/>
<title>Home</title>
</head>
<body>
<div class="navigation">
</div>
<div class="block-one">
</div>
<div class="block-two-header">
<span>
<h3>Parallax Demo</h3>
<p>
Parallax scrolling is a web site trend where the background content is moved at a different speed than the
foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed
posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit
dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur
aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus
vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan
fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam
maecenas, porta porttitor placerat leo.
</p>
</span>
</div>
<div class="block-two">
</div>
<div class="block-three">
</div>
<div class="block-one">
</div>
</body>
</html>
在您的 css 中编辑此内容。将 padding-top
添加到 body 不会隐藏视差的上半部分。
这是工作 fiddle
body{
padding:120px 0 0 ;
}
.navigation {
position:fixed;
z-index:100;
top:0;
background-color:white;
width:100%;
height:120px;
}
尝试 position:fixed
,页眉部分总是在顶部
.navigation {
position:fixed;
z-index:100;
top:0;
background-color:white;
width:100%;
height:120px;
}
尝试工作 fiddle
我建议将位置绝对更改为固定。试试看有什么不同
使用Bootstrap,可以在网页的顶部有一个导航栏,使用自定义CSS,可以固定它的位置,这样当你向下滚动时,整个div
将具有属性 position:fixed
.
代码如下:
在 <head>
中,包含 CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
我有同样的问题
使用"sticky" 位置解决问题
body {
margin: 0;
padding: 0 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
position: sticky;
top: 0px;
height: auto;
width: 100%;
}