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 上下滚动显示隐藏的更多相关文章

  1. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  2. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  3. jQuery动画之显示隐藏动画

    1. 显示动画 以下面一个代码示例: <!doctype html> <html lang="en"> <head> <meta char ...

  4. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  7. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  8. jQuery控制TR显示隐藏

    参考链接:http://www.jb51.net/article/51221.htm 通过jQuery的hide和show方法即可.

  9. jq与js的写法,示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

随机推荐

  1. (原创)C# 压缩解压那些事儿

    吐槽: 搜狗推广API的报告服务太坑爹了!!! 搜狗推广API的报告服务太坑爹了!!! 搜狗推广API的报告服务太坑爹了!!! 搜狗的太垃圾了,获取下来的压缩包使用正常方式无法解压!!没有专门的API ...

  2. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  3. java的局部变量和成员变量以及区别

    一.局部变量 存在某个方法中的变量就叫局部变量,局部变量一旦声明就必须赋值 否则不能使用 代码如下: class Person { String name; char sex; int age; pu ...

  4. img没有src属性时自动出现边框

    当img没有接收到src属性的时候会自动出现边框,border:0/none都不管用的情况下 解决方法 一行css 可以解决 img[src=""],img:not([src]){ ...

  5. phpMyAdmin 安装教程全攻略

    管理MYSQL数据库的最好工具是PHPmyAdmin,现在最新版本是phpMyAdmin 2.9.0.2,这是一个国际上开源的软件,一直在更新版本,你可以从 http://www.phpmyadmin ...

  6. 2018牛客网暑假ACM多校训练赛(第四场)A Ternary String 数论

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-A.html 题目传送门 - https://www.no ...

  7. NOIP2017提高组Day2T3 列队 洛谷P3960 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/9265380.html 题目传送门 - 洛谷P3960 题目传送门 - LOJ#2319 题目传送门 - Vij ...

  8. P1118 [USACO06FEB]数字三角形`Backward Digit Su`… 回溯法

    有这么一个游戏: 写出一个11至NN的排列a_iai​,然后每次将相邻两个数相加,构成新的序列,再对新序列进行这样的操作,显然每次构成的序列都比上一次的序列长度少11,直到只剩下一个数字位置.下面是一 ...

  9. poj 1966(求点连通度,边连通度的一类方法)

    题目链接:http://poj.org/problem?id=1966 思路:从网上找了一下大牛对于这类问题的总结:图的连通度问题是指:在图中删去部分元素(点或边),使得图中指定的两个点s和t不连通  ...

  10. Gym 102091L Largest Allowed Area 【二分+二维前缀和】

    <题目链接> 题目大意:给你一个由01组成的矩形,现在问你,该矩形中,最多只含一个1的正方形的边长最长是多少. 解题分析: 用二维前缀和维护一下矩形的01值,便于后面直接$O(1)$查询任 ...