Jquery 只滚动标题的一部分，其余部分已修复

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

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

餐厅披萨店
罗兹沃兹·杰德尔是一位充满活力的斯兰人

这仅在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

---

通过在导航栏中添加

position:sticky

，您可以在纯CSS中轻松实现这一点

好的！让它工作起来

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');
    }

});
});

CSS

---

最大的问题是使用windows作为变量nad溢出到body上，因为首先并没有设置任何变量，但设置visible完成了任务。感谢Junaid Ahmed的支持。

我有点担心使用这些bug:/Play with the code，根据您的需要更改代码。如果仍然不起作用，请再次发布您的代码，我们将很乐意提供帮助。让它起作用，退出您的代码并进行一些研究。谢谢所以，这意味着从我的回答来看，我的代码没有什么问题，只是你的CSS代码有一些与我的JS冲突的属性。

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;
}