js判断鼠标向上滚动并浮动导航
<div id="Jnav">
<ul class="nav">
<li><a href="#">WEB前端开发</a></li>
<li><a href="#">前端开发博客</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">前端开发</a></li>
</ul>
</div>
.nav{width:980px; margin:0 auto;}
.nav li{display:inline-block; *display:inline; *zoom:; margin:0 10px;}
.nav li a{display:block; padding:5px 10px;}
.fixed-nav{
position: fixed;
width:100%;
top:-40px;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fixed-nav-appear{top:;}
var $nav = $('#Jnav'), navTop = $nav.offset().top, navH = $nav.outerHeight(),winTop_1=0,winWidth=$(window).width(), holder=jQuery('<div>');
$(window).on('scroll',function(){
var winTop_2 = $(window).scrollTop();
holder.css('height',navH);
//开始浮动,不过不显示
if(winTop_2>navTop && winWidth>980){
holder.show().insertBefore($nav);
$nav.addClass('fixed-nav');
}else{
holder.hide();
$nav.removeClass('fixed-nav');
}
//判断鼠标向上滚动,显示出来
if(winTop_2>winTop_1 && winWidth>980){
$nav.removeClass('fixed-nav-appear');
}else if(winTop_2<winTop_1){
$nav.addClass('fixed-nav-appear');
}
winTop_1 = $(window).scrollTop();
})
js判断鼠标向上滚动并浮动导航的更多相关文章
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
<script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js无间隙向上滚动
一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...
随机推荐
- JSP页面和属性命名规范
1.页面命名: 登陆 Login注册 Register用户 User创建 Create修改 Update删除 Delete查询 Selete控制器 Controller用户名 Username密码 ...
- Spark学习(四) -- Spark作业提交
标签(空格分隔): Spark 作业提交 先回顾一下WordCount的过程: sc.textFile("README.rd").flatMap(line => line.s ...
- 图解MySQL5.5详细安装与配置过程
MySQL是一个开源的关系型数据库管理系统,原由瑞典MySQL AB公司开发,目前属于Oracle公司旗下.MySQL是目前世界上开源数据库中最受欢迎的产品之一,是应用最为广泛的开源数据库.MySQL ...
- MYSQL limit,offset 区别
SELECT keyword FROM keyword_rank WHERE advertiserid' order by keyword LIMIT OFFSET ; 比如这个SQL ,limit后 ...
- django系列--第一节
学习前准备 安装必须的学习环境环境(学习前提:python2.7) pip install django==1.8 pip install mysqldb(后面会用) pip install Pill ...
- nginx缓冲区优化
关于缓冲, 主要是合理设置缓冲区大小, 尽量避免缓冲到硬盘时的情况 proxy_buffering proxy_buffering这个参数用来控制是否打开后端响应内容的缓冲区,如果这个设置为off,那 ...
- php : 自定义分页类
Page.class.php : <?php namespace Tools; class Page { private $total; //数据表中总记录数 private $listRows ...
- html5上传图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- public protect private. 草稿。
public protect private. 草稿. #include <iostream> #include <thread> #include <memory> ...
- CI 3.0.6 控制器打印base_url 地址不为 localhost的解决方法
1.在application\config\autoload.php 第92行 加载url $autoload['helper'] = array('url'); 2.application\c ...