ブートストラップ：スクロール後に上部に固定されるスティッキーナビゲーションバー

Question

このサイトの古いバージョンがこのサイトにありますが、私の質問には答えられません。

ブートストラップを使用してウェブサイトを作成しようとしていますが、カバー画像/カルーセルがブラウザ領域全体を占めるランディングページがあり、ナビゲーションバーは下部に固定されています。表示領域の下にあるべきではなく、画面の一番下にあります。さらに、訪問者が下にスクロールすると、navbarが上をたどり、一度画面の上に当たると固定され、後に続くように固定する必要があります。

私はaffixプラグインを試しましたが、私はそれで上記を達成する方法を理解できませんでした。ここで

はそれは私が作成しようとしていますレイアウトを持っている時に、私がつまずいたサイトです：http://www.basabots.com/

は、任意およびすべてのヘルプをありがとうございました。

Answer 1

ここでは、その基本的な例を示します。基本的なことは、最初に絶対位置と下端にヘッダーを置くことです。次に、ウィンドウのスクロール位置を監視し、スクロール量がウィンドウの高さからヘッダーの高さを差し引いた後、ヘッダーを固定位置と上部に変更します。

var scrollpos = window.scrollY; 
 
var header = document.getElementById("header"); 
 
var windowheight = window.innerHeight; 
 
var headerheight = document.getElementById("header").offsetHeight; 
 

 
function add_class_on_scroll() { 
 
    header.classList.add("fixed"); 
 
} 
 

 
function remove_class_on_scroll() { 
 
    header.classList.remove("fixed"); 
 
} 
 

 
window.addEventListener('scroll', function() { 
 
    scrollpos = window.scrollY; 
 
    if (scrollpos > (windowheight - headerheight)) { 
 
    add_class_on_scroll(); 
 
    } else { 
 
    remove_class_on_scroll(); 
 
    } 
 
});

html, body { 
 
    width: 100%; 
 
    height: 1800px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: grey; 
 
} 
 

 
#header { 
 
    background-color: black; 
 
    color: white; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    text-align: center; 
 
} 
 

 
#header h3 { 
 
    margin: 0; 
 
    line-height: 50px; 
 
} 
 

 
#header.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
}

<div id="header"> 
 
    <h3>This is the header</h3> 
 
</div>

で遊ぶためのフィドル：https://jsfiddle.net/thepio/c686hnek/1/