我在 JavaScript 中查找了多个示例。但结果仍然是负面的。这是情况。
我有一个有顶部导航的网站。根据按下的导航按钮,左侧的菜单会出现在页面上,其中包含更多选项。
例子:你有Home | Products | Crew | About
用户单击“产品”,它会打开一个新页面,左侧显示一个菜单
Desktops
Laptops
Notebooks
eReaders
Mp3 Players
Tablets
Phones
当用户完全向上滚动到顶部时,我希望左侧的菜单距离顶部大约 420 像素。当他向下滚动时,它将滚动到顶部。一旦它到达显示页面的顶部,它就会固定在顶部位置。
顶部的导航栏被硬编码到母版页中。左侧的菜单是母版页中的 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 中是否有不同的方法来实现这一点?