javascript - 前端导航栏效果
PHP中文网
PHP中文网 2017-04-10 16:05:40
[JavaScript讨论组]

medium首页的导航栏挺好看的,一直以来不知道是怎么实现的,请问这是用什么实现的,有啥jquery或者css插件吗?谢谢。
就是往下面滚动时导航栏隐藏,往上面滚动时导航栏就出现。

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(3)
天蓬老师

Hide header on scroll down, show on scroll up可以参考一下这个。还找到了一个插件谢谢谢谢

伊谢尔伦

f12就是在nav上有几个css的添加和删除 至于上下滚轮事件 js代码如下

<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/> 
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/> 
<script type="text/javascript"> 
var scrollFunc=function(e){ 
    ee=e || window.event; 
    var t1=document.getElementById("wheelDelta"); 
    var t2=document.getElementById("detail"); 
    if(e.wheelDelta){//IE/Opera/Chrome 
        t1.value=e.wheelDelta; 
    }else if(e.detail){//Firefox 
        t2.value=e.detail; 
    } 
} 
/*注册事件*/ 
if(document.addEventListener){ 
    document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
</script> 
PHP中文网

我想问这个gif图用什么截的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号