Question

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

真的可以在这里使用一些帮助！我卡住了......免费做这件事，对于一个我肯定会欣赏它的好人来说！

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>

Answer 1

在你的CSS中编辑它。将padding-top添加到您的身体不会隐藏视差的上半部分。

这是工作fiddle

body{
  padding:120px 0 0 ;
}

.navigation {
  position:fixed;
  z-index:100;
  top:0;
  background-color:white;
  width:100%;
  height:120px;
}

Answer 2

尝试使用position:fixed，标题部分始终位于顶部

.navigation {
  position:fixed;
  z-index:100;
  top:0;
  background-color:white;
  width:100%;
  height:120px;
}

尝试使用工作小提琴

https://jsfiddle.net/1a45z65g/

Answer 3

使用Bootstrap，您可以在网页顶部设置导航栏，并使用自定义CSS，您可以固定其位置，这样当您向下滚动时，整个div将具有属性{ {1}}。

以下是代码：

在position:fixed中，加入CDN：

<head>

Answer 4

我有同样的问题

具有“粘性”位置可以解决问题

backgroundWorker

Answer 5

我建议将绝对位置更改为固定位置。尝试看看差异

CSS如何将固定菜单添加到视差网站布局

5 个答案: