jquery 上下滚动显示隐藏
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("ontouchmove", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if (delta === 0) return false;
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
2,sass转译
@function rem($n) {
@return $n / 40 + rem;
}
3,js判断鼠标上下滚动;
<script type="text/javascript">
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
4,判断鼠标、滚动条上下滚动
var windowTop = 0;
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if(scrolls < 5 || scrolls <= windowTop) {
// 向上滚动显示
console.log('向上')
windowTop = scrolls;
} else {
// 向下滚动隐藏
console.log('向下')
windowTop = scrolls;
}
});
5,设置页面加载时滚动条自动滚到底的方法:
window.onload = function(){
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
window.scrollTo(h,h);
}
$(function(){
var h = $(document).height()-$(window).height();
$(document).scrollTop(h);
});
6,可以将HTML结构转换成字符串的函数;
function Dom2Str(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><');
}
var str = Dom2Str(function(){
/*
<a class="tab-item active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-me"></span>
<span class="tab-label">我</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">收藏</span>
</a>
<a class="tab-item" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">设置</span>
</a>
*/
});
$('nav').append(str);
。
jquery 上下滚动显示隐藏的更多相关文章
- Jquery实现滚动显示欢迎字幕效果
Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...
- Jquery控制滚动显示欢迎字幕v2
Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...
- jQuery动画之显示隐藏动画
1. 显示动画 以下面一个代码示例: <!doctype html> <html lang="en"> <head> <meta char ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...
- JQuery 控制元素显示隐藏
JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...
- jQuery控制TR显示隐藏
参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.
- jq与js的写法,示例回到顶部div滚动显示隐藏
jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...
随机推荐
- [转]如何将mysql表结构导出成Excel格式的(并带备注)
方法一: 1.使用一个MySQL管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想转成Excel格式的只需手动将该表复制到Excel中去. 方法二: 1.以下用的 ...
- 基于jquery的页面分屏切换模板
闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...
- MySQL InnoDB中的事务隔离级别和锁的关系
前言: 我们都知道事务的几种性质,数据库为了维护这些性质,尤其是一致性和隔离性,一般使用加锁这种方式.同时数据库又是个高并发的应用,同一时间会有大量的并发访问,如果加锁过度,会极大的降低并发处理能力. ...
- net core体系-web应用程序-4net core2.0大白话带你入门-3asp.net core项目架构和配置文件解读
asp.net core web项目目录解读 Connected Services 和传统.net web项目相比,它的功能类似于添加webservice或者wcf service的引用.暂时用不 ...
- net core体系-2继续认识net core
认识net core,net core到底啥?从哪说起呢?我想作为开发的码农,web项目不陌生吧,那就从对应的.net web 对应的net core Web Application项目开始吧. 下面 ...
- 006 python操作符
一:数值操作符 1.操作符 2.不同点 上面有了一个说法,这个 / 与其他的编程不同. 这个是精确的除法. 3.连续赋值 这种用法,第一次遇见,就记录下来. 4.注意点 重要的是要注意优先级的问题 二 ...
- 爬虫3 requests基础之下载图片用content(二进制内容)
res = requests.get('http://soso3.gtimg.cn/sosopic/0/11129365531347748413/640') # print(res.content) ...
- Scala-Unit6-final/type关键字、样例类&样例对象
一.关键字 1.final关键字 用final修饰的类:不能被继承 用final修饰的方法:不能被重写 注意:(1)在Scala中变量不需要用final修饰,因为val与var已经限制了变量是否可变 ...
- CSS规范 - 分类方法
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...
- Kosaraju与Tarjan(图的强连通分量)
Kosaraju 这个算法是用来求解图的强连通分量的,这个是图论的一些知识,前段时间没有学,这几天在补坑... 强连通分量: 有向图中,尽可能多的若干顶点组成的子图中,这些顶点都是相互可到达的,则这些 ...