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

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

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

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>

来源

2016-12-24 John Doe

它是否解决问题了吗？如果是，那么你能否接受答案？你知道点击答案左边的复选标记 – ab29007

你可能想看看https://stackoverflow.com/questions/35958375/css-make-div-position-fixed-inside-div-with-perspective-propertie/ – qbolec

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

这里的工作

body{ 
    padding:120px 0 0 ; 
} 

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

来源

2016-12-24 07:38:52 ab29007

@John Doe它解决了你的问题吗？如果是，那么你能否接受答案。你知道点击答案左边的复选标记。 – ab29007

非常感谢！对不起，等待，假期让我全部结束。 –

与position:fixed尝试，头部分始终坚持走在最前面

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

与工作小提琴尝试

https://jsfiddle.net/1a45z65g/

来源

2016-12-24 07:40:31

-1

我会建议改变立场绝对到固定。尝试看看它们之间的差异

来源

2016-12-24 07:41:57 RJN

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

下面的代码：

在<head>，包括CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

来源

2016-12-24 07:49:28

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

回答

相关问题