摘要：個(gè)人筆記在給在線簡(jiǎn)歷添加特效過(guò)程中遇到的問(wèn)題及解決方法一預(yù)覽頁(yè)面滾動(dòng)元素的事件處理函數(shù)。語(yǔ)法參數(shù)是一個(gè)函數(shù)的引用。事件是當(dāng)窗口發(fā)生滾動(dòng)得時(shí)候觸發(fā)的事件返回文檔在垂直方向已滾動(dòng)的像素值。

github
預(yù)覽

元素的 scroll 事件處理函數(shù)。
語(yǔ)法 element.onscroll = functionReference 參數(shù) functionReference是一個(gè)函數(shù)的引用。
當(dāng)該元素滾動(dòng)時(shí)，會(huì)執(zhí)行該函數(shù)。

window.onscroll事件是當(dāng)窗口發(fā)生滾動(dòng)得時(shí)候觸發(fā)的事件

Window.scrollY返回文檔在垂直方向已滾動(dòng)的像素值。
MDN

點(diǎn)我觸發(fā)點(diǎn)擊事件

實(shí)際上點(diǎn)到了span上面
a.target是用戶操作的
a.currentTarget是監(jiān)聽的
打印如下:

https://developer.mozilla.org...
下一個(gè) 兄弟子節(jié)點(diǎn)

let a = x.currentTarget;
            let brother = a.nextSibling;
            while (brother.nodeType === 3){
                // brother.nodeType === 3說(shuō)明brother還是回車或者文字或者空格,循環(huán)到他不是為止
                brother = brother.nextSibling;
            }

或者

while (brother.tagName !== "UL"){
                // brother.nodeType === 3說(shuō)明brother還是回車或者文字或者空格,循環(huán)到他不是為止
                brother = brother.nextSibling;
            }

tagName返回的是大寫的標(biāo)簽名

let liTags = document.querySelectorAll("nav.meau > ul > li");

過(guò)不不能操控的元素有margin,display

一般用來(lái)操控:
寬高width,height
定位后的right,left等
透明度opacity
陰影box-shadow

demo預(yù)覽地址
核心是transition(過(guò)渡),但是仍未解決transition對(duì)display無(wú)效的問(wèn)題.
目前只做到,讓其透明讀變成0,近似消失.

代碼:

    
    
    




    

        
            作品
        
        

            
js
            
CSS
            
啊可接受的管理會(huì)計(jì)ad佛羅倫薩放得開是龍卷風(fēng)的恐懼感
        
    
    

        
            博客
        
        

            
245345345
            
346
            
啊實(shí)34534543打?qū)嵈髱煹?/li>
        
    
    

        
            我的聯(lián)系電話
        
    

a.onclick = function (x) {
            x.preventDefault();//禁止默認(rèn)動(dòng)作.即禁止a標(biāo)簽的默認(rèn)錨點(diǎn)跳轉(zhuǎn)動(dòng)作
        }

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默認(rèn)動(dòng)作.即禁止a標(biāo)簽的默認(rèn)錨點(diǎn)跳轉(zhuǎn)動(dòng)作
            let a = x.currentTarget;
            console.log(a.href);
           console.log( a.getAttribute("href"));

        }

a.href返回的是帶域名的href的值
a.getAttribute("href")就返回href里面的值

弄清元素距離頁(yè)面頂部的距離和距離視口頂部的距離:
頁(yè)面頂部指的是整個(gè)網(wǎng)頁(yè)的頂部,即隨著頁(yè)面的滾動(dòng),元素距離頁(yè)面頂部的距離不會(huì)變化.

window.scrollX

window.scrollY是網(wǎng)頁(yè)滾動(dòng)的距離,即視口頂部距離網(wǎng)頁(yè)頂部的距離.

為了跨瀏覽器兼容，請(qǐng)使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

Element.getBoundingClientRect().top是元素Element距離視口頂部的距離
參考這里Element.getBoundingClientRect()

element.offsetTop是元素頂部距離網(wǎng)頁(yè)最上層的距離

HTMLElement.offsetTop 為只讀屬性，它返回當(dāng)前元素相對(duì)于其 offsetParent 元素的頂部的距離。

offsetTop

element.offsetTop等于Element.getBoundingClientRect().top + window.scrollX

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默認(rèn)動(dòng)作.即禁止a標(biāo)簽的默認(rèn)錨點(diǎn)跳轉(zhuǎn)動(dòng)作
            let a = x.currentTarget;
            // console.log(a.href);
            let href = a.getAttribute("href")//"#siteSkills"
            let element = document.querySelector(href);

            console.log("element.getBoundingClientRect().top為:"+element.getBoundingClientRect().top);
            console.log("(window.scrollY為:"+window.scrollY);
            console.log("上面兩個(gè)的和為"+(element.getBoundingClientRect().top+window.scrollY));//相加等于offsetTop
            console.log("element.offsetTop為:"+element.offsetTop)//只讀屬性

        }

窗口移動(dòng)到相應(yīng)位置(網(wǎng)頁(yè)左上角的移動(dòng)到(x,y)

document.querySelector()返回的是一個(gè)元素,

但是區(qū)別于:document.querySelectorAll("nav>ul>li>a")
返回的是數(shù)組