保持菜单项在滚动时固定，而不是在滚动之前

Question

我在JavaScript中查找了多个示例。但结果仍然是否定的。情况是这样的。

我有一个网站，有一个顶级导航。根据按下的导航按钮，页面上会出现左侧的菜单，其中包含更多选项。

示例:您有Home | Products | Crew | About

用户点击"Products“，就会打开一个新页面，在左侧显示一个菜单

Desktops
Laptops
Notebooks
eReaders
Mp3 Players
Tablets
Phones

我想在左侧的菜单大约是420px从顶部时，用户是完全滚动到顶部。当他向下滚动时，它将滚动到顶部。一旦它到达所显示页面的顶部，它就会固定在顶部位置。

顶部的导航栏是硬编码到母版页中的。左侧的菜单是母版页中的ContentPlaceHolder，内容会根据所查看的页面而变化。

我尝试使用JavaScript代码：

<script type="text/javascript">
    $(document).on('scroll', function () {
        if ($('#bar')[0].offsetTop < $(document).scrollTop()) {
            $("#bar").css({ position: "fixed", top: 0 });
        }
        if ($(document).scrollTop() < $("#position-saver")[0].offsetTop) {
            $("#bar").css({ position: "static", top: 0 });
        }
    });
</script>

但它不起作用。我不知道为什么。这是母版页代码。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="StasisGamerLounge.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">`
    <meta charset="utf-8" />
    <title>Stasis Gamer Group - <%: Page.Title %></title>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">     
          <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>  
    <webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <script type="text/javascript">
        $(document).on('scroll', function () {
            if ($('#bar')[0].offsetTop < $(document).scrollTop()) {
                $("#bar").css({ position: "fixed", top: 0 });
            }
            if ($(document).scrollTop() < $("#position-saver")[0].offsetTop) {
                $("#bar").css({ position: "static", top: 0 });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="float_right">
        <section id="login">
                    <asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                                <a id="registerLink" runat="server" href="~/Account/Register.aspx">Register </a> | 
                                <a id="loginLink" runat="server" href="~/Account/Login.aspx"> Log in</a>
                                <br />
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                        <p>
                            Greetings, <a id="A1" runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account">
                                <asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a>!
                            <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                        </p>
                    </LoggedInTemplate>
                </asp:LoginView>
            </section>
        </div>
    <div class="bodywrapper">
        <div class="logo">
        </div>
        <div class="header">
        </div>
        <div class="topnav">
            <ul id="navbar">
                <li><asp:HyperLink runat="server" ID="home" NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>
                <li><asp:HyperLink runat="server" ID="games" NavigateUrl="~/Games.aspx">Games</asp:HyperLink></li>
               <% if (Page.User.Identity.IsAuthenticated ) { %> <li><asp:HyperLink runat="server" ID="myFiles" NavigateUrl="~/Drive.aspx">My Files</asp:HyperLink></li>
                <li><asp:HyperLink runat="server" ID="events" NavigateUrl="~/Events.aspx">Events</asp:HyperLink></li> <% } %>
                <li><asp:HyperLink runat="server" ID="about" NavigateUrl="~/About.aspx">About</asp:HyperLink></li>                    
            </ul>
        </div>
        <div class="contentwrapper">
        <div class="leftMenu" id="bar">
            <h3>Menu</h3>
            <asp:ContentPlaceHolder ID="MenuContent" runat="server">

            </asp:ContentPlaceHolder>
        </div>`

是我把Javascript放错了，还是这里发生了什么？在ASP.Net中有没有不同的方法来实现这一点？

Answer 1

下面是一个基本的、通用的实现：http://jsfiddle.net/SwHqk/

我注意到您使用的是jQuery，所以为了简单起见，我选择了它。

$(window).scroll(function(e){
    var top = $(window).scrollTop();

    if (top > 200) // this would be the "normal" position of the menu
        $("#floating-box").addClass("fixed");
    else
        $("#floating-box").removeClass("fixed");
});​

CSS (提炼到重要的部分)

#floating-box{
    margin-top:200px;
    position:absolute;
    margin-left:5px;
}
#floating-box.fixed{
    position:fixed;
    top:0;
    margin-top:5px; /* you could use top instead of margin-top for both stationary/fixed */
}