可以'无法使JavaScript导航栏正常工作
Can't get JavaScript navigation bar to work
所发生的一切都不是。我向下滚动,条形图保持不变。我向上滚动,也没有发生任何事情。将代码放入下面的三个独立文件中并不像JFiddle那样工作
基本上,我一直在尝试实现这个fiddle,但由于某种原因,我可以在网站上看到它在工作,但它在我的版本上不起作用。
Fiddle:http://jsfiddle.net/JJ8Jc/258/
也许我链接JavaScript不正确或其他什么。
我在用谷歌浏览器。
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
</head>
<body>
<div id="header_nav">
<div id="header_div">
div
</div>
</div>
CSS:
body {
height:2000px;
width:100%;
background-color:#F0F0F0;
}
#header_nav {
width:100%;
height:100px;
padding-top:10px;
padding-left:10px;
background-color:#fff;
position:fixed;
top:0;
left:0;
text-align:center;
border-bottom:1px solid #c1c1c1;
}
#header_div
{
position:relative;
background-color:#14a;
color:#c1c1c1;
height:30px;
width:40px;
display:inline-block;
padding-top: 10px;
}
JavaScript:
$(function(){
$('#header_nav').data('size','big');
$('#header_div').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
$('#header_div').data('size','small');
$('#header_div').stop().animate({
height:'20px',
width: '20px',
'padding-top' : 5
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
$('#header_div').data('size','big');
$('#header_div').stop().animate({
height:'30px',
width: '40px',
'padding-top' : 10
},600);
}
}
});
将你的html变成这样:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
</head>
<body>
<div id="header_nav">
<div id="header_div">
div
</div>
</div>
你可能想查看我添加的行:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
正如我记忆中的那样,我不确定它是正确的
您发布的HTML中没有包含jQuery库。
按F12,我确信控制台中显示$ is undefined
。
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作