jquery - 仅滚动标题的一部分并固定

Question

我遇到了整晚都无法解决的问题。其实我在找什么。“实际外观和工具来解释我的要求”

我希望红色部分向上滚动，当我滚动时，蓝色部分也继续向上滚动，但在 top: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

这仅用 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;
}