ヘッダーの一部だけをスクロールして固定する

Question

私は問題が発生したので、一晩中解決できません。実際に私が探しているもの。

「私が求めていますかを説明するための実際の見た目とツール」私はスクロールすると、青い部分があまりにもスクロールアップに行くが、トップに、スクロールアップするために赤い部分が欲しい：0PX私はそれがjQueryになると思うし、私は本当に悪いです。最高ののは、モバイルユーザーのためにちょうどCSSになります。誰かが私を助けてくれますか？ここに私のHTMLのマークアップです

<header> 
     <div ID="Banner"> 
      <br> 
      <h1>RISTORANTE PIZZERIE NA HRADBÁCH</h1> 
      <h3>ROZVOZ JÍDEL A PIZZY PO SLANÉM A OKOLÍ</h3> 
     </div> 
     <div id="Menu"> 

      <table > 
       <tr> 
        <td> 
         <asp:Button ID="homeButton" runat="server" Text="Domů" PostBackUrl="Home.aspx" /> 
        </td> 
        <td> 
         <asp:Button ID="dailyMenuButton" runat="server" Text="Denní Nabídka" PostBackUrl="DailyMenu.aspx" /> 
        </td> 
        <td> 
         <asp:Button ID="diningMenuButton" runat="server" Text="Jídelní Menu" PostBackUrl="DiningMenu.aspx" /> 
        </td> 
        <td> 
         <asp:Button ID="contactsButton" runat="server" Text="Kontakt" PostBackUrl="Contacts.aspx" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </header> 
    <div ID="Content"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 

Answer 1

それは働いた。

jQueryの

var distance = $('#Menu').offset().top, 
$window = $(window); 

$(document).ready(function() { 

$(document).scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     $("#Menu").addClass('MenuOnTop'); 
     $("#Content").addClass('ContentStep'); 
    } else { 
     $("#Menu").removeClass('MenuOnTop'); 
     $("#Content").removeClass('ContentStep'); 
    } 

}); 
}); 

.MenuOnTop { 
position:fixed; 
top: 0px; 
width:100%; 
} 

    .ContentStep{ 
    margin-top:120px; 
} 

html, body { 
    width: 100%; 
    font-family: 0; 
    margin: 0; 
    padding: 0; 
    overflow: visible; 
} 

最大の問題は、最初のdidntのために、身体上の変数NADオーバーフローとしてWindowsを使用していたCSSは、いずれかを設定しますが、目に見えるを設定する仕事をしてくれています。 Junaid Ahmedにキックアップしてくれてありがとう。

Answer 2

これはCSSでのみできません。これを行うjQueryがあります。私はコードをテストしなかったが、結果が何であるかを教えてくれた。

var $menu = $("#Menu"), 
    menuStart = $menu.offset().top(); 

$(window).scroll(function() { 
    if ($(window).scrollTop() > menuStart){ 
     $menu.addClass('menu-stick'); 
    } else { 
     $menu.removeClass('menu-stick'); 
    } 
}); 

CSS

#Menu { 
    position: relative; 
} 

.menu-stick { 
    position: fixed; 
} 

Answer 3

あなたは簡単にナビゲーションバーにposition: stickyを追加することによって、純粋なCSSでこれを達成することができます。

Browser Support