スティッキーのnavbarが下部で動作していませんか？

Question

私は、同じように上部にある粘着性のあるナビゲーションバーを下ろそうとしましたが、動作しませんでした。 例：navbarまでスクロールすると表示されないはずです。もしnavbarの位置に到達すると、常にnavbarが開きます。それがうまくいかない理由を提案してください。

純粋なCSSでしたいと思います。

テストページ：https://codepen.io/burner/pen/qVVomv

var navbar = document.getElementById("navbar"); 
 
var sticky = $(navbar).height() - top - link.height(); 
 

 
function myFunction() { 
 
    if (window.pageYOffset < sticky) { 
 
    navbar.classList.add("sticky") 
 
    } else { 
 
    navbar.classList.remove("sticky"); 
 
    } 
 
}

div { 
 
    margin: 0; 
 
    font-size: 28px; 
 
} 
 

 
.header { 
 
    background-color: #f1f1f1; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 

 
#navbar { 
 
overflow: hidden; 
 
background-color: #333; 
 
} 
 

 
#navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
#navbar a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
#navbar a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.content { 
 
    padding: 16px; 
 
} 
 

 
.sticky { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100% 
 
} 
 

 
.sticky + .content { 
 
    padding-top: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div onscroll="myFunction()"> 
 

 
<div class="content"> 
 
    <h3>Sticky Navigation Example</h3> 
 
    <p>The navbar will stick to the top when you reach its scroll position.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
</div> 
 

 

 
<div id="navbar"> 
 
    <a class="active" href="javascript:void(0)">Home</a> 
 
    <a href="javascript:void(0)">News</a> 
 
    <a href="javascript:void(0)">Contact</a> 
 
</div> 
 
<div class="header"> 
 
    <h2>Scroll UP</h2> 
 
    <p>Scroll up to see the sticky effect.</p> 
 
</div> 
 
</div>

Answer 1

は、私はあなたの質問にコメントで述べたように、あなたのJS/JQコードを使用すると、使用されるさまざまな変数のためのいくつかの値が欠落しています。

とにかく、私はあなたが望むものを実現するjQueryコードを作成しました。下記またはこちらを参照してください>jsFiddle

コードはかなりストレートです。ナビゲーションバーの位置をスクロール距離と比較します。 NAVの高さを念頭に置いても、ウィンドウの

var navbar = $("#navbar"), 
 
    nTop = navbar.offset().top, 
 
    nBottom = nTop + navbar.outerHeight() 
 
$(window).on("scroll", function() { 
 
    var wScroll = $(this).scrollTop(), 
 
    stickyHere = wScroll + $(this).height() 
 

 
    if ((nBottom < stickyHere) && (nTop > wScroll)) { 
 
    navbar.addClass("sticky") 
 
    } else { 
 
    navbar.removeClass("sticky") 
 
    } 
 
})

body { 
 
margin:0; 
 
} 
 
div { 
 
    margin: 0; 
 
    font-size: 28px; 
 
} 
 

 
.header { 
 
    background-color: #f1f1f1; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 

 
#navbar { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
#navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
#navbar a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
#navbar a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.content { 
 
    padding: 16px; 
 
} 
 

 
.sticky { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100% 
 
} 
 

 
.sticky + .content { 
 
    padding-top: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <h3>Sticky Navigation Example</h3> 
 
    <p>The navbar will stick to the top when you reach its scroll position.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
 
    efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
 
    efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
 
    efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
 
    efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
 
    efficiantur his ad. Eum no molestiae voluptatibus.</p> 
 
</div> 
 

 

 
<div id="navbar"> 
 
    <a class="active" href="javascript:void(0)">Home</a> 
 
    <a href="javascript:void(0)">News</a> 
 
    <a href="javascript:void(0)">Contact</a> 
 
</div> 
 
<div class="header"> 
 
    <h2>Scroll UP</h2> 
 
    <p>Scroll up to see the sticky effect.</p> 
 
</div>