前の要素の高さが未知のスクロールの固定メニュー

Question

ユーザーが特定の高さを超えてスクロールしたときにメニューを修正する方法を探しています。

メニューより前の要素の高さが可変なので、ちょうどif ($(window).scrollTop() > 70){を使用することはできません。私はdomready上のメニューのy位置を読むことができるが、私はまた、バナーの高さは、いくつかのメディアクエリによって変更される可能性があるので、サイズ変更、アカウントのブラウザに取る必要が

* Banner <-- This is a variable height banner 
* Menu 
* Content 

：

ページレイアウトは、のようなものです。

これを達成するにはどうすればよいでしょうか？

Answer 1

あなたが欲しい=「スクロール-NAV-ヘッダを」あなたはあなたのスクリプト

$(window).scroll(function() { 
    if ($(".menu").offset().top > 100) { 
     $(".menu").addClass("scrolling-nav-header"); 
    } 
    else { 
     $(".menu").removeClass("scrolling-nav-header") 
    } 
}); 

でこれを使用することができますし、あなたのCSSは、このクラスの機能を持っています。

menu.scrolling-nav-header{ 
    position:absolute; 
    top:0; 
    left:0; 
} 

Answer 2

これが相対ヘッダーオフセットより大きい場合、スクロール可能ヘッダーの絶対オフセットの上端をコンテナー（ウィンドウ）スクロール値に設定します。

$(document).ready(function() { 
 
    var scrollheader = $('.scrollheader'), scrollcontainer = $(window); 
 
    var scrolling, shY; 
 
    (function updateOffsetTop() { 
 
    if (!scrolling) {shY = scrollheader.offset().top;} 
 
    scrolling = false; 
 
    setTimeout(updateOffsetTop, 5000); // Define lapse to update the height above. 
 
    })(); 
 
    scrollcontainer.scroll(function() { 
 
    var wsY = $(this).scrollTop(); 
 
    if (wsY > shY) { 
 
     scrollheader.offset({top: wsY}); 
 
    } else { 
 
     scrollheader.css({top: 0}); 
 
    } 
 
    scrolling = true; 
 
    }); 
 
    scrollcontainer.trigger('scroll'); 
 
});

.scrollheader { 
 
    position: relative; 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/> 
 
Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/> 
 
<div class="scrollheader">Scroll Header</div> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 
 
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>

注：定期的にヘッダ上のコンテンツの高さの変化を確認するために更新しました。このようなものになるだろう。