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如何將固定菜單添加到視差網站佈局

回答

相關問題