要实现的效果：
1.sticky navbar
2.auto highlight navbar
3.auto scroll smoothly
4.second menu
前四个效果实现需要记得的知识点
1.window.onscroll
为当前页面的页面滚动事件添加事件处理函数.
window.onscroll = scroll;
function scroll()
{
alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset);
// 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高.
}
2.scrollX和scrollY
scrollX返回文档/页面水平方向滚动的像素值。
var x = window.scrollX;
x 为该文档从左侧开始滚动的像素值。
注意：
pageXOffset 属性是 scrollX 属性的别名：
window.pageXOffset == window.scrollX; // 总是 true
scrollY返回文档在垂直方向已滚动的像素值。
var y = window.scrollY;
y 是文档从顶部开始滚动过的像素值。
pageYOffset 属性是 scrollY 属性的别名：
window.pageYOffset == window.scrollY; // 总是返回 true
3.doucment.querySelector()和document.querySelectorAll()
element = document.querySelector(selectors);
文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项，则返回null。
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
elementList = document.querySelectorAll(selectors);
-
elementList 是一个静态的 NodeList 类型的对象. -
*selectors*是一个由逗号连接的包含一个或多个CSS选择器的字符串.
selectors参数不能包含Css伪元素，否则会返回空
新出来的API,尽量多使用这个，少使用ById，ByClass
4.onmouseenter,onmouseleave,
on就是监听的意思
mouseenter
当定点设备（通常指鼠标）移动到元素上时就会触发mouseenter 事件
类似mousemouseover，它们两者之间的差别是mouseenter不会冒泡（bubble），也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发
mouseleave
指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。
mouseleave和mouseout是相似的，但是两者的不同在于mouseleave不会冒泡而mouseout会冒泡。
5.event.preventDefault
[Event]接口的 preventDefault( )方法，告诉user agent如果此事件没有需要显式处理，那么它默认的动作也不要做（因为默认是要做的）。
阻止默认事件，但是此事件还是继续传播，除非碰到事件侦听器调用[stopPropagation()]或[stopImmediatePropagation()]，才停止传播。
阻止冒泡：
event.stopPropagation();
阻止捕获和冒泡阶段中当前事件的进一步传播。
6.e.target和e.currenttarget的区别
e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.
e.Target是触发事件调度程序触发的对象，e.currentTarget是您分配给侦听器的对象。
demo
var body = document.body,
btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
console.log( event.currentTarget === body );
console.log( event.target === btn );
}, false );
点击button，会出现两个true
7.getAttribute()
getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）
let attribute = element.getAttribute(attributeName);
let linkPonit = document.querySelectorAll('.navlist>li>a');
for(let i=0;i<linkPonit.length;i++){
linkPonit[i].onclick = (e) =>{
e.preventDefault();//阻止默认动作
let a = e.currentTarget;
let href=a.getAttribute('href');//不能直接写a.href，因为获取到的 不是id名而是带有http协议的id
let element = document.querySelector(href);
let top = element.offsetTop
window.scrollTo(0,top-80)
}
}
8.css样式问题
image.png
为什么会出现这种情况？？
因为脱离文档流的元素会尽量缩小它的文字体积，会缩到小到只能存放一个文字,这个时候使用 white-space：nowrap 阻止换行就可以去除这种现象了
image.png
但是下面这种情况我没有设置 white-space：nowrap ，他也会被撑开，为什么呢？
image.png
因为“热干面”啊！ 外国人和中文不同，我们认为是三个字，他们则认为连在一起就是一个字，那aaaaaa是一个字又怎么可以换行呢，所以被撑开了
倘若要强行换行，怎么办呢？
使用word-break:break-all : 任意都可以换行，在内联元素中使用的话注意父级元素的宽度，否则会分成一个一个字符
image.png
或者使用连字符
image.png
5.auto hide aside
6.gapless slide
7.loading animation
8.animate when scroll
网友评论