1

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.

Example: You have Home | Products | Crew | About

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

ユーザーが一番上まで完全にスクロールしたときに、左側のメニューを上から約 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 でこれを達成する別の方法はありますか?

4

1 に答える 1

3

これは基本的で一般的な実装です: 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 */
}
于 2012-12-18T20:13:13.857 に答える