offset()

2016-02-27

今天有个学弟问我问题
对这个学弟一看就是一个很有前途的好学弟
毕竟他每次问我的问题我都不会

学姐也只比你早入坑半年而已
当然他显然不知道

作为一个无时无刻不装逼的学姐
当然不能说
我不会
所以他每次的问题我都
解决了

言归正传
他的代码是这样的

$(function() {
    var box = $(".box");
    var height = box.outerHeight();
    var top = 0;
    var i = 0;
    for (; i < 6; i++) {
        top = top + height;
        box.css('top', top + 'px');
    }
    $window = $(window);
    $window.on('load', function() {
        for (var w = 0; w < 6; w++) {
            var dis = height / 2 + box.eq(w).offset().top;
            if (dis < screen.height) {
                box.eq(w).fadeOut();
            }

        }

    });
});

报错是offset().top取不到值

我给的解决方法是把offset().top换成offsetTop。

我猜可能的原因有两种（有点虚……这个用的真心不熟）
第一，offset().top是获取box的唯一相关坐标，所以大概不能循环。
第二，引用博客
http://www.cnblogs.com/jshen/archive/2012/11/29/2794292.html

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20px;这种形式的值,所以是带有”px”的)
offsetTop 只读，而 style.top 可读写。(style.top赋值切记加上”px”,测试过发现IE下用数值是可以的,但其它主流chrome,opera,ff,safari都不能识别,所以必须加”px”)
如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也都是类似区别。
好了，然后让学弟试一下，不报错了。
but
console.log()打印出来是NAN
现学现用补了一下数据类型
对！就是它了！
outHeight（）获取的是整数
offsetTop也是数值
而screen.height是像素单位
用$(window).height()就好了嘛

学弟又问了，这个window是哪一块撒？
就是浏览器窗口当前可视区域嘛~
可视区域……视区域是指屏幕大小吗？
当然……我还真不大清楚
百度一下
唔~就是一个网页，除掉工具栏，除掉滚动条
对！这一块就是可视区域

好了，装逼到此结束
刚到学校一直在整理东西加逛吃逛吃
只把svg和canvas文档简单过了一遍
（感觉可以放一下日后有空再找个项目练一下）
主要是懒……
良心有愧记录一下
拖延症得改
嗯后天就改
明天再逛吃一天
（还减不减肥了==！）

but