Question

我试图完全这样做，但它不起作用......

<!DOCTYPE html>
<html>

<head> 
<link type="text/css" rel="stylesheet" href="website.css">
<script src="website.js"></script>
</head>

<body> 
<div class="menu">Menu</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />(Bottom!)

</body>


</html>

// website.css

.menu {
    background:#345;
    color:#FFF;
    height:2em;
    padding:.5em;
    position:absolute;
    top:50px;
    width:100%;
}
.fixed {
    position:fixed;
    top:0;
}

// website.js

/* Dynamic top menu positioning
 *
 */

var num = 50; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

//USE SCROLL WHEEL FOR THIS FIDDLE DEMO

打开此html文件时，为什么这不起作用？我想制作那种导航栏。谁能帮帮我？

Answer 1

您没有在HTML中包含对jQuery的引用，这就是它无法正常工作的原因。

在您的website.js脚本标记之前添加以下内容。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="website.js"></script>

Answer 2

您需要在<head>标记之前，在您的其他<script>代码

之前将此行添加到您的HTML中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

重新编码失败

2 个答案: