基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/common.css">
<style type="text/css">
.top-title {
background:#e74c3c;
color:white;
font-size:24px;
padding:5px;
text-align:center;
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
}
.hiddened {
top: -90px;
}
.showed {
top:0;
z-index: 9999;
}
.margint {
height: 1500px;
background-color: red;
}
</style>
</head>
<body>
<div class="top-title">这是顶部导航条</div>
<div class="margint">
<p>滚动看效果</p>
<p>滚动看效果</p>
<p>滚动看效果</p>
</div>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var winHeight = $(document).scrollTop();
$(window).scroll(function() {
var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
$('.top-title').addClass('hiddened');
}else {
$('.top-title').removeClass('hiddened');
}
if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类
$('.top-title').removeClass('showed');
}
else {
$('.top-title').addClass('showed');
}
});
});
</script>
</body>
</html>
基于jQuery实现页面滚动时顶部导航显示隐藏效果的更多相关文章
- jQuery实现页面滚动时顶部动态显示隐藏
http://www.jqcool.net/jquery-scroll.html 另外headroom.js也行:http://www.bootcss.com/p/headroom.js/
- [jquery]判断页面滚动到顶部和底部（适用于手机web加载）
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- 一款基于jquery滑动后固定于顶部的导航
之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...
- Javascript实现页面滚动时导航智能定位
遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- Eclipse 常用快捷键 (动画讲解)【转】
Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...
- 「BZOJ2388」旅行规划
传送门 分块+凸包 求出前缀和数组s 对于l~r加上k,相当于s[l]~s[r]加上一个首项为k,公差为k的等差数列.r~n加上k*(r-l+1). 分块之后对每一块维护两个标记,一个记录它加的等差数 ...
- Object.keys()应用
<script type="text/javascript"> var person={ firstName:"David", lastName:& ...
- css3中 百分比宽度减去固定宽度的写法
div{ /*实现了宽度为父容器宽度减去固定的300像素*/ width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); widt ...
- 把github上的项目clone到IDEA
点击clone按钮后,会弹出如下截图弹窗,点击 NO 点击open,找到刚刚从github上clone下来的项目,打开即可
- IDEA本地SBT项目上传到SVN
需求 将本地创建的一个项目上到SVN 网上很多从SVN下载到idea,提交.更新.删除等操作. 但是少有从本地上传一个项目到svn管理的案例 本文参考https://blog.csdn.net/cao ...
- double转String
两种方式: 1.value = new DecimalFormat().format(double); 2.value = String.valueOf(double); 要相保留所有的double位 ...
- Eclipse反编译插件jd-eclipse安装指南
Java Decompiler是一款比较好用的反编译工具,包括: JD-GUI:独立java编译工具 JD_Eclipse:用于Eclipse的反编译插件 下面主要介绍jd-eclipse的获取和安装 ...
- 《DSP using MATLAB》Problem 8.1
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- 爬虫（二）建立代理ip池
之前我们说网站反爬虫的一个常用方法是检测ip,限制访问频率.所以我们要通过设置代理ip的办法绕过这个限制.有不少提供免费代理ip的网站,像https://www.xicidaili.com/nt/,我 ...