CSS/html - スクロール後にフッターのみが表示されるようにしますか？見えるページ領域のすぐ下に下に固執する？

Question

[OK]を、私はまさにこのリンクに続き、少し変更された効果を達成しようとしている - https://css-tricks.com/snippets/css/sticky-footer/

私はこのコード

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 

 
.footer{ 
 

 
    background-color: white; 
 
    opacity: 0.8; 
 
    text-align: center; 
 
} 
 
.wrapper:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.footer, .wrapper:after { 
 
    /* .push must be the same height as footer */ 
 
    height: 142px; 
 
} 
 

 
.wrapper { 
 
    background: #50a3a2; 
 
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); 
 
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); 
 
    /* 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-top: 0px; 
 
    */ 
 
    overflow: scroll; 
 
    z-index: -1; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -142px; 
 
}

<div class="wrapper"> 
 
    <h1 class="headertext">Welcome back.</h1> 
 
</div> 
 
<div class="footer">Footer</div>

と私のページの一番下に固執する私のフッターを得ています

しかし、下の黒いフッターバーを見るためにここでスクロールするのと同じように、ページの下にスクロールする必要があります。ヘッダーのみが表示されていても、フッターをスクロールして下部に貼り付ける必要があります。

私は既にラッパーの高さを100％に設定しているので、これを行う方法はわかりません。ページ全体を取り上げ、理論上はフッタを外す必要があります。

ページの下部にフッタを貼り付けるにはどうしたらいいですか？最初に表示されていたページの部分をペーストします（スクロールするまで表示されません）。

Answer 1

まずあなたが必要本当にすべてがフッターの場合は、今あなたはフッターのdiv

.show-footer { 
    visibility: visible; 
    position: fixed; 
    bottom: 0; 
} 
.footer { 
    visibility: hidden; 
} 

Answer 2

のCSSクラス「ショー・フッタ」を必要とするページスクロールdetaction

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
      $(".footer").addClass("show-footer"); 
     } else { 
      $(".footer").removeClass("show-footer"); 
     } 
    }); 
}); 

のためのjQueryを使用することができます固定された高さのウィンドウの最初の下端のすぐ下に（十分な内容がそれをさらに下に押し込むために追加されるまで）スティック、これはトリックを行うようです。

ラッパーの最小高さを100%に設定し、その背後にバックグラウンドを延長するためにフッターの高さを設定するだけです。 calc()はあなたの合計を決定することができます。

バックグラウンドが必要ない場合はさらに簡単になり、:afterとマイナス幅のビジネスをすべて削除して、最小高さを100%に設定するだけです。

$("#add").on("click", function() { 
 
    $("<p>Pellentesque habitant morbi tristique senectus.</p>").insertAfter("#add"); 
 
});

* { 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); 
 
    min-height: calc(100% + 142px); 
 
    margin-bottom: -142px; 
 
} 
 

 
.wrapper:after { 
 
    display: block; 
 
    content: ""; 
 
    height: 142px; 
 
} 
 

 
.footer { 
 
    background-color: white; 
 
    opacity: 0.5; 
 
    height: 142px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <h1 class="headertext">Welcome back.</h1> 
 
    <p><button id="add">Add Content</button></p> 
 
</div> 
 
<div class="footer">Footer</div>

Answer 3

あなたは、その目的のためにjqueryのスクロールを使用することができます。私はちょうどページのスクロールを有効にするためにいくつかのダミーテキストを追加しました

はJavaScript：

$(window).on("load", function() { 
    var position = $('.wrapper').scrollTop(); 

    $('.wrapper').scroll(function() { 
    var scroll = $('.wrapper').scrollTop(); 
    if (scroll > position) { 
     $('.footer').removeClass('hide'); 
    } else if (scroll == 0) { 
     $('.footer').addClass('hide'); 
    } 
    position = scroll; 
    }); 
}); 

追加CSS：

.hide { 
    display: none; 
} 

jsfiddle：http://jsfiddle.net/nikdtu/g3svmoqq/