先頭へ戻るボタンとフッタ（配置）

Question

私のウェブサイトには、「back-to-top」ボタンが追加されました。

HTML：

<div class="scroll-top scroll-is-not-visible"> 
    <a href="#0"><i class="fa fa-angle-up" aria-hidden="true"></i></a> 
</div> 
<footer class="site-footer"> 
... 
</footer> 

CSS：

.scroll-top{ 
    position: fixed; 
    right: 50px; 
    bottom: 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.scroll-is-not-visible{ 
    visibility: hidden 
} 
.scroll-is-visible{ 
    visibility: visible 
    opacity: 1 
} 
.scroll-fade-out{ 
    opacity: .5 
} 

異なるクラスは、jQueryのによって追加または削除されます。すべて正常に機能しますが、完全にスクロールすると、ボタン（論理的に）はフッタをと重複させ、その背後のテキストを非表示にします。

私の質問は、フッターがビューポートにない限り、定義された位置にボタンを表示する方法です。フッタがビューポートに入るとすぐに、ボタンはフッターの上に50pxの位置に留まります。コンテナ。したがって、フッターがビューポート内にある場合、ボタンはコンテンツと共にスクロールしなければなりません。

私はこれが分かりやすいかどうか分かりません。私が意味するものが分からない場合は、ご意見ください。

ありがとうございます！

Answer 1

jQueryを使用すると、ボタンがフッタを覆い隠していたウィンドウスクロールのポイントを特定し、それを考慮するjavascript/jqueryを記述することができます。私はここで何かをした：http://codepen.io/babzcraig/pen/QNJryeあなたと遊ぶことができます。コードは次のようになります：

HTML：

<div class="container"> 
    <h2>Here's Your Content... bla bla bla<h2> 
    <button id="btn">Click Me</button> 
</div> 
<div class = "footer"> 
    <p>This is Your Footer</p> 
</div> 

CSS：

.container { 
    background-color: pink; 
    height: 1000px; 
    margin-bottom: 0px; 
} 

#btn { 
    margin-left: 100px; 
    width: 50px; 
    height: 50px; 
} 

.footer { 
    background-color: yellow; 
    margin-top: 0px; 
    height: 200px; 
} 

p { 
    padding: 30px; 
    font-family: roboto; 
} 

JS：

$(document).ready(function() { 

    function getScroll() { 
    var btnScroll = $(window).scrollTop(); 
    console.log(btnScroll); 
    if (btnScroll < 450) { 
     $("#btn").css({"position":"fixed","margin-top": "450px"}) 
    } else { 
     $("#btn").animate({"position":"fixed","margin-top": "200px"}, 400) 
    } 

    } 

    setInterval(function(){getScroll();}, 500); 
}); 

あなたの数字は、あなたの特定の設計に基づいて異なるだろうが、数字で少しでもお支払いいただければ、何が効いているのかを知ることができます。 elseブロックに.animate()メソッドを使用したので、CSSの宣言だけを使用してスムーズな遷移を得ることができました。これが役に立ったら教えてください。