- setTimeout()
setTimeout(function () {
enter.classList.remove('active')
}, 2000)
2秒之后执行括号里的代码。
- window.onscroll
window.scrollY
window.onscroll = function () {
if (window.scrollY > 0) {
topNavBar.classList.add('sticky')
} else {
topNavBar.classList.remove('sticky')
}
}
window.onscroll:在用户滑动浏览器窗口的时候触发一个函数。
window.scrollY:获取到浏览器窗口滚动的高度。
3.document.querySelectorAll()
let liTags = document.querySelectorAll('nav.menu>ul>li')
接受一个选择器,返回选择器对应的所有元素。
- .onmouseenter
.onmouseleave
liTags[i].onmouseenter = function (x) {
x.currentTarget.classList.add('active')
}
liTags[i].onmouseleave = function (x) {
x.currentTarget.classList.remove('active')
}
.onmouseenter:当鼠标进入一个元素的时候,会触发一个函数。
.onmouseleave:当鼠标离开一个元素的时候,会触发一个函数。
- .preventDefault()
.getAttribute()
document.querySelector()
.offsetTop
window.scrollTo()
for(let i=0;i<aTags.length;i++){
aTags[i].onclick = function(x){
x.preventDefault()
let a = x.currentTarget
let href = a.getAttribute('href')
let element = document.querySelector(href)
let top = element.offsetTop
window.scrollTo(0,top-70)
}
}
.preventDefault():阻止默认动作。
.getAttribute():获取到这个标签上写的原文,而不是浏览器修改(比如加了http协议的东西)。
document.querySelector():与加了All相比,只会返回一个元素,而不是一个数组。
.offsetTop:获取一个元素距离到页面顶部的像素数(不是浏览器窗口顶部)。
window.scrollTo():让浏览器窗口滑动到某个位置,括号里是左右方向和上下方向滑动的位置的值。