CSS如何添加固定菜单到视差网站布局(CSS how to add fixed menu to parallax website layout)

我正在尝试使用固定菜单栏制作视差网站，但无法弄清楚如何修复页面顶部的菜单栏。我尝试了不同的位置值，但他们似乎都没有工作

真的可以在这里使用一些帮助！我卡住了..这样做是免费的，对于一个很好的人我肯定会很感激它！

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>

I am trying to make a parallax website with a fixed menu bar but cant figure out how to fix the menu bar at the top of the page. I tried different position values but none of them seem to work

Could really use some help here! Im stuck.. Doing this for free and its for a nice guy whom I sure will appreciate it!

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>