ASPX C#NAV BAR顶部的FIixing出错

时间:2015-10-16 07:10:07

标签: javascript c# jquery asp.net navbar

这是我在运行脚本时遇到错误的代码。 我的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>

1 个答案:

答案 0 :(得分:0)

看起来你缺少对JQuery的引用。

添加此项(如果您想使用CDN)

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

如果我没有运行它,我会在控制台中收到'未捕获的ReferenceError:$未定义'。