利用 js 实现鼠标滚动时自动隐藏顶部标题或导航栏

日期: 2019-05-23 11:31:49 人气: -

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();
    });
});

分类标签：利用实现鼠标滚动自动