我在这里有一个简单的代码可以使div显示(从display:none;到display:block;)
我在JSFiddle中测试了这个并且它可以工作,但不是在我的localhost中。我认为这是脚本标签的内容。
我可以在我的Localhost wamp服务器上看到带有F12的css和js文件,但它不起作用。 感谢。
HTML:
<html>
<head>
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/up.js"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="scroll_top">Hello World</div>
<div class="container">
<?php include("includes/header.php");?>
<div class="content">
<?php include("includes/navigation.php");?>
<div class="main_content">
</div>
</div>
<?php include("includes/footer.php"); ?>
</div>
</body>
</html>
CSS:
#scroll_top{
position:fixed;
display:none;
background-color:#FFF;
}
JS:
var $logo = $('#scroll_top');
$(document).scroll(function() {
$logo.css({display: $(this).scrollTop() > 100? "block":"none"});
});
这是一个由Roko C. Buljan设计的JSFiddle,位置固定且有效。 http://jsfiddle.net/psvn9/400/
答案 0 :(得分:1)
var $logo = $('#scroll_top');
$(document).scroll(function() {
if($(this).scrollTop()> 100)
{ //alert("scop");
// $logo.css({display: $(this).scrollTop() > 100? "block":"none"});
$('#scroll_top').css("display", "block");
}else{
$('#scroll_top').css("display", "none");
}
});