Day13（scroll 家族，JSON，demo固定菜单栏，点击缓动）

Offset ‘自己的’的意思

1、offsetWidth 自己的宽度 offsetHeight 自己的高度；

width+padding+border;
div width=200px;border=3px;padding-right=15px;
div offsetWidth=200+6+15=221;
offsetWidth和div.style.width的区别
div.style.width获取到的是字符串，并且可以进行修改

2、offsetWidth获取到的是数值类型，只能获取，不能修改；

offsetLeft 获取div距离最近的带有定位的父级，相当于是左边距；

3、offsetParent 返回自己的父亲元素（带有定位的）；

如果所有父级都没有定位，则返回body
和parentnNode区别，parentNode返回父亲，不管是否带有定位；

4、event事件

div.onclick=function(event){},这个envent就是它点击的时候，浏览器所执行的所有事件；
pageX、pageY 距离文档的X轴距离
clientXc、clientY 距离浏览器可见区域的X轴距离；
screenX、screenY 距离屏幕。超出了浏览器；

Scroll 家族

Offset家族自己的
Scroll 滚动家族
scrollTop 被卷去的头部
它就是当你滑轮滚动浏览网页隐藏在屏幕上方的距离
页面滚动事件：

Window.onscroll=function（）{执行语句}；

谷歌浏览器，以及：没有声明DTD（）的浏览器（怪异模式）：

document.body.scrollTop;//仅限谷歌以及怪异模式浏览器、

火狐以及其他浏览器:

document.documentElement.scrollTop;

iE9以上++++++++++++++++++:

var scrollTop=document.body.scrollTop ||
document.documentElement.scrollTop ||
window.pageYOffset;   //兼容性写法

JSON ***********************************************

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，我们称之为javascript对象表示法，使用json进行传输数据是很常用的
Json就是javascript
Json其实很像我们学过的CSS条
var myjson={k:v,k:v,k:v…..} json用键值对的方法表示 key:value

封装自己的scroll；

scrollTo(x,y)

使当前页面跳转到（x,y）这个坐标
window.scrollTo(0,500);
格式：window.scroll(Xpos,Ypos);
两个值一个都不能省略，不想跳给个0都行，就是不能少
Xpos 必须，想要跳转的X轴的位置
Ypos 必须，想要跳转的Y轴的位置
Xpos一般用不上，给个0就行，因为一般大部分网页水平滚动条是不让出现的

demo 固定缓动菜单栏



![](images/aside.jpg)

demo 点击缓动规定位置


    首页
    商城
    关于
    我的
    收藏


    首页
    商城
    关于
    我的
    收藏