ページが最後に到達したときにビューにスクロールするフッターを作成するには

Question

ページの下部に到達したときにページの内容がオーバーラップするようにスクロールするフッタを作成しようとしています。これは逆のようなものですCodepen by devkick

私のサイトは現在この方法ですが、デザイナーは上記のように新しいバージョンを動作させるように求めました。基本的にページはスクロールを停止し、フッターはスクロールしてページに重なって表示されます。私はアニメーションでたくさんのものを見つけましたが、jqueryアニメーションを使わずにスクロール可能でシンプルにしたいと思っています。私は視差の効果も見ていましたが、それらのすべては、ページが途中であることによって明らかにされるのと同じ隠れたフッターであるようです。ここで

は、私はよく分からないので、私の現在のフッターの設定

<div class="wrapper"> 
<div class="innerWrapper"> 
    <!--all the content!--> 
</div> 
</div> 
    <footer> 
     <div class="innerFooter"> 
      <!--all the content!--> 
     </div> 
    </footer> 

で、私のフッターのCSSの一部

//wrapper for everything but footer 
.wrapper { 
    position:relative; 
    z-index:3; 
    background-color: #fff; 

} 

//wrapper for internal content 
.innerWrapper { 
    text-align: center; 
    width: 100vw; 
} 
footer { 
    height: 380px; 
    color:$white; 
    font-size:12px; 
    position:relative; 
    z-index:0; 
    background-color:$black; 
} 

footer .innerFooter { 
    position: fixed; 
    left: 1%; 
    right: 1%; 
    bottom: 1em; 
    z-index: 1; 
} 

Answer 1

オーケーもし私が最初に私が最初にした方法で可能になりたかったです考え。私はアニメーションのアプローチを取って終わったが、それがそれを演出する方法は、私が思ったほどのアニメーションのように感じることはありません。

var homePage = $('.homeWrap').length; 

$(window).scroll(function(){ 
    if (homePage === 0) { 
    var footerHeight = $('footer').height(); 

    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0) 
    { 
     if($('footer').data('size') == 'hide') 
     { 
      $('footer').data('size','show'); 
      $('footer').css('visibility', 'visible'); 
      $('footer').stop().animate({ 
       bottom:'0px' 
      },400); 
     } 
    } 
    else 
    { 
     if($('footer').data('size') == 'show') 
     { 
      $('footer').data('size','hide'); 
      $('footer').stop().animate({ 
       bottom: '-'+footerHeight 
      },400); 

     } 
    } 
    } else {} 

}); 

$(document).ready(function() { 
    if (homePage === 0) { 
    var body = document.body, 
    html = document.documentElement; 
    $('footer').data('size','show'); 
    if ($('.innerWrapper').offsetHeight >= html.offsetHeight) 
    { 
     $('footer').data('size','hide'); 
    } 
    else 
    { 
     $('footer').data('size','show'); 
     $('footer').stop().animate({ 
       bottom:'0px', 
       visibility: 'visible' 
      },400, function() { 

      }); 
    } 
    } else {} 

}); 

フィードバック歓迎！