固定フッタのような固定フッタ効果

Question

thisサイトのようにフッタ効果を作りたいと思います。私は私のコンテンツのラッパーが必要と思うし、フッターを追加します。

ので、構造は次のように次のようになります。しかし、これはこの効果がありません

.footer{ 
width: 100%; 
} 

.footer-content{ 
position: fixed; 
bottom: 0; 
width: 100%; 
z-index: 0; 
} 
.content{ 
z-index: 9999 !important; 
background-color: #fff; 
position: relative; 
margin-bottom: 600px; //height of my full footer 
} 

：よう

<div class="content"></div> 
<div class="footer"> 
    <div class="footer-content"> 
    </div> 
</div> 

とCSS。助けてください、私の英語のために申し訳ありません。

Answer 1

これを実現するには、フッターを固定し、その上にコンテンツをスクロールさせる必要があります。

CSSのラフな例は次のようになります。

.content { 
    position: relative; /* required for z-index to work */ 
    z-index: 2;   /* bring above footer */ 
    margin-bottom: 100px; /* the height of the footer */ 
} 


.footer { 
    position: fixed; /* fix in position */ 
    z-index: 1;  /* bring below content */ 
    bottom: 0;  /* anchor to bottom of screen */ 
    left: 0;   /* go full width */ 
    width: 100%;  /* go full width */ 
} 

Answer 2

このコード

HTML

<div class="content"> 
    <h1>Content</h1> 
</div> 
<div class="footer"> 
    <div class="footer-content"> 
     <h1>Footer</h1> 
    </div> 
</div> 

CSS

.footer{ 
    width: 100%; 
    height: 1px; 
    display: block; 
} 

.footer-content{ 
    bottom: 0; 
    display: block; 
    position: fixed; 
    width: 100%; 
    z-index: 0; 
    background: #f1f1f1; 
} 

.content{ 
    z-index: 9999 !important; 
    background-color: #fff; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 1500px; 
    margin-bottom: 600px; 
    margin-top: -30px; 
} 

サンプルを確認してください Fixed footer effect in CSS