Div元素像背景一樣行動

Question

如何讓<div>元素像背景一樣起作用，就像本網站的介紹jabarprov.go.id？

這是我codepen http://codepen.io/anon/pen/RGEmxB

$(document).ready(function(){ 
 
    \t $(window).bind('scroll', function() { 
 
    \t var navHeight = $(window).height() - 70; 
 
    \t \t \t if ($(window).scrollTop() > navHeight) { 
 
    \t \t \t \t $('nav').addClass('fixed'); 
 
    \t \t \t } 
 
    \t \t \t else { 
 
    \t \t \t \t $('nav').removeClass('fixed'); 
 
    \t \t \t } 
 
    \t \t }); 
 
    \t });

#div1, #div2{ 
 
    \t \t \t height:100vh; 
 
    \t \t } 
 
    \t \t 
 
    \t \t #div1{background-color:cyan} 
 
    \t \t #div2{background-color:lightgrey} 
 
    \t \t 
 
    \t \t nav { 
 
    \t \t \t position: absolute; 
 
    \t \t \t bottom: 0; 
 
    \t \t \t width: 100%; 
 
    \t \t \t background: Green; 
 
    \t \t \t padding:2px 0; 
 
    \t \t \t z-index:1; 
 
    \t \t } 
 
    \t \t 
 
    \t \t .fixed { 
 
    \t \t \t position: fixed; 
 
    \t \t \t top: 0; 
 
    \t \t \t height: 70px; 
 
    \t \t \t z-index: 1; 
 
    \t \t } 
 
    \t \t section { 
 
    \t \t \t height: 100vh; 
 
    \t \t } 
 

 
    \t \t /* Screens Settings */ 
 
    \t \t #screen1 { \t 
 
    \t \t \t background: #43b29d; 
 
    \t \t } 
 

 
    \t \t #screen1 p { 
 
    \t \t \t padding-top: 200px; 
 
    \t \t } 
 

 
    \t \t #screen2 { 
 
    \t \t \t background: #efc94d; 
 
    \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 

 
    <div id="div1" class="col-md-3">LEFT SECTION</div> 
 
     <div id="div2" class="col-md-9">RIGHT SECTION</div> 
 
    \t <nav class="main-bg"> 
 
    \t  <div class="container"> 
 
    \t \t \t NAVIGATION HERE 
 
    \t \t </div> 
 
    \t </nav> 
 
    \t <section id="screen2"></section> 
 
    \t <section id="screen3"></section>

問題是我的頁面是不固定的前奏（就像固定的背景）。

Answer 1

我修改了你的代碼。 希望這是你的搜索內容 http://codepen.io/anon/pen/qaLGrp

我繞製成DIV1的包裝和2是固定的，並做出改變大小

包裝

<div id="intro-wrapper"> 
    <div id="div1" class="col-md-3">a</div> 
    <div id="div2" class="col-md-9">b</div> 
</div> 

包裝CSS和尺寸

body{ 
    padding-top: 100vh; 
} 
#intro-wrapper{ 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    width: 100vw; 
} 
#div1, #div2{ 
    height:calc(100vh - 70px); 
} 

導航位置

nav { 
    position: absolute; 
    top: calc(100vh - 70px); 
    width: 100%; 
    background: Green; 
    padding:2px 0; 
    z-index:1; 
    height:70px; 
}