aspxc#导航条修复在顶部给出错误

ASPX C# NAV BAR FIixing at top gives error

本文关键字：顶部 出错 错误 导航 aspxc#      更新时间：2023-09-26

这是我的代码，我得到错误，而运行脚本。我的javascript没有被执行。我不知道为什么出现这个错误。

它运行得很好http://jsfiddle.net/CriddleCraddle/Wj9dD/

这是我相同的代码。

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
 <script type="text/javascript" language="javascript">
     $(document).ready(function () {
         $(window).scroll(function () {
             console.log($(window).scrollTop())
             if ($(window).scrollTop() > 280) {
                 $('#nav_bar').addClass('navbar-fixed');
             }
             if ($(window).scrollTop() < 281) {
                 $('#nav_bar').removeClass('navbar-fixed');
             }
         });
     });
    </script>
    <style type="text/css">
    html, body {
    height: 4000px;
}
.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}
#body_div {
    top: 0;
    position: relative;
    height: 200px;
    background-color: green;
}
#banner {
    width: 100%;
    height: 273px;
    background-color: gray;
    overflow: hidden;
}
#nav_bar {
    border: 0;
    background-color: #202020;
    border-radius: 0px;
    margin-bottom: 0;
    height: 30px;
}
.nav_links {
    margin: 0;
}
.nav_links li {
    display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
    padding: 0 15.5px;
    color: #3498db;
    text-decoration: none;
}

    </style>
</head>
<body> 
    <div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>
  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
</body>
</html>

看起来你缺少一个JQuery的参考

添加这个(如果你想使用CDN)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

我得到一个'Uncaught ReferenceError: $ is not defined'在控制台如果我运行它没有。

相关文章：