Abigale's Blog


  • Home

  • Categories

  • Archives

  • Tags

  • About

  • Search

Jquery判断滚动条是否到达窗口顶部和底部

Posted on 2017-02-14 | In Front-End |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
```
<!--more-->
```javascript
var win_height=$(window).height();
var doc_height=$(document).height();
var scroll_top=$(document).scrollTop();
/*
doc_height是文档的高度,scroll_top是滚动条上部离文档顶部的高度,window_height表示窗口高度。
当scroll_top == 0 时,表示滚动条已经到达窗口顶部。
当scroll_top + window_height >= doc_height 时,表示滚动条已经到达窗口底部。
*/
//判断滚动条是否到达窗口底部
$(window).bind('scroll', function(){ //绑定滚动事件
if($(document).scrollTop() + $(window).height() >= $(document).height()){
console.log(win_height);
console.log($(document).scrollTop());
console.log(doc_height);
//......
}
});
});
</script>

document属性和方法

Posted on 2016-12-10 | In Front-End |

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

Read more »

Angular中dialog参数传递

Posted on 2016-12-07 | In Front-End |

Angular的官方文档

解决方案一

按照官方文档,在html中加入点击事件弹出对话框

1
2
3
4
//html
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)" >
Alert Dialog
</md-button>
Read more »

一个人的朝圣

Posted on 2016-07-29 | In Diary |

朝圣是宗教或灵性生活寻觅灵性意义的过程,通常是到一处圣地或者是对某人信仰有重要意义的地方。各大宗教都有朝圣的活动。从世俗的角度而言,朝圣是一种族群的认同,而非基于信仰。流行文化也正把朝圣重新定义,例如去探访某小说、电视剧、电影或ACG等作品取材、拍摄的地点也被称为朝圣、圣地巡礼。旅游业兴起之前,朝圣是人们离开家乡出外游历的主要方式之一。

Read more »

代码规范工具 -- eslint

Posted on 2013-04-06 | In Front-End |

安装

  • 在根目录下运行命令 npm install eslint -g
  • 本例中使用eslint进行js代码检验,需引入 gulp-eslint,执行命令 npm install gulp-eslint
  • 在es6环境下使用gulp-eslint,还需要安装 babel-eslint,npm install babel-eslint
Read more »

安逸时光

Posted on 2011-06-22 | In Diary |

安逸时光

又一个五天结束了,不算假期,却让自己有了放假的心情。今天中考的学生看上去都没有一副终于释放的样子,跟两年前的自己好像,但忍不住替他们开心,丽嘲笑我说爽的又不是我,穷开心什么呢。冰心说成功的花,人们只惊羡她现时的明艳!当初它的芽儿,浸透了奋斗的泪泉我就是忽视了它。包括自己,本身缺少的那份拼搏,没有多少资本去评论什么。

Read more »
1…56
Abigale

Abigale

56 posts
4 categories
32 tags
© 2015 — 2018 Abigale
欢迎你呀 小伙伴 ^_^