Keeping menu item fixed when scrolling, not before

Question

I've looked up multiple examples in JavaScript. But the result still turns up negetive. Here is the Situation.

I have a website that have a Top Navigation. Depending on the Nav Button pressed, a menu to the left appears on the page with more selections.

User clicks "Products" and it opens up a new page with a Menu on the left showing

Desktops
Laptops
Notebooks
eReaders
Mp3 Players
Tablets
Phones

I want the menu on the left to be approximately 420px from the top when the user is fully scrolled up to the top. As he scrolls down it will scroll to the top. Once it reaches the top of the displayed page, it becomes fixed at the top location.

The Nav Bar on the top is hard-coded into the Master Page. The Menu on the Left is a ContentPlaceHolder in the Master Page and the Content changes based on the page being viewed.

I tried using the JavaScript code:

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

but it doesn't work. I can't figure out why. This is the Master Page Code.

<%@ 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>`

Am I putting the Javascript in wrong, or what's going on here? Is there a different way to accomplish this in ASP.Net?

Answer 1

Here's a basic, generic implementation: http://jsfiddle.net/SwHqk/

I noticed you are using jQuery, so I went with that for simplicity.

$(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 (distilled to the important bits)

#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 */
}

Keeping menu item fixed when scrolling, not before

Question

1 answers

solution1
3 ACCPTED 2012-12-18 20:13:13

Keeping menu item fixed when scrolling, not before

Question

1 answers

solution1 3 ACCPTED 2012-12-18 20:13:13

solution1
3 ACCPTED 2012-12-18 20:13:13