站长交易首选担保平台!
日期: 2019-06-21 10:21:46 人气: -
html代码：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现鼠标滚动时自动隐藏顶部标题或导航栏 - 站长助手</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css">
</head>
<body>
<header class="topnav">js实现鼠标滚动时自动隐藏顶部标题或导航栏 - 站长助手</header>
<div id="li" style="text-align:center">
<p>利用js实现鼠标滚动时自动隐藏顶部标题或导航栏。</p>
<p>站长助手</p><p>ZZAID.COM</p>
</div>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<div style="text-align:center;margin:50px 0; font-size:14px;">
<p>适用浏览器：IE8、Chrome、360、Safari、FireFox、搜狗、傲游、Opera、世界之窗。</p>
<p>来源：<a href="https://www.zzaid.com/" target="_blank">站长助手</a></p>
</div>
</body>
</html>
css代码：style.css
body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}
#li{width:690px; margin:30px auto; color:#34495e;text-align:justify}
img{float:left; margin:0 10px 10px 0;}
.topnav{background-color:#e74c3c; color:white; font-size:24px; padding:5px; text-align:center; position: fixed; left:0; top:0; width:100%; transition: top .5s;}
.tophidden {top: -90px;}
.topshow {top:0;z-index: 9999;}
js代码：index.js
$(function(){
var c = $(document).scrollTop();
var h = $('.topnav').outerHeight();
$(window).scroll(function() {
var k = $(document).scrollTop();
if (k > h){$('.topnav').addClass('tophidden');}
else {$('.yapiskan').removeClass('tophidden');}
if (k > c){$('.topnav').removeClass('topshow');}
else {$('.topnav').addClass('topshow');}
c = $(document).scrollTop();
});
});
