摘要：個人筆記在給在線簡歷添加特效過程中遇到的問題及解決方法一預覽頁面滾動元素的事件處理函數。語法參數是一個函數的引用。事件是當窗口發生滾動得時候觸發的事件返回文檔在垂直方向已滾動的像素值。

github
預覽

元素的 scroll 事件處理函數。
語法 element.onscroll = functionReference 參數 functionReference是一個函數的引用。
當該元素滾動時，會執行該函數。

window.onscroll事件是當窗口發生滾動得時候觸發的事件

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

點我觸發點擊事件

實際上點到了span上面
a.target是用戶操作的
a.currentTarget是監聽的
打印如下:

https://developer.mozilla.org...
下一個 兄弟子節點

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

或者

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

tagName返回的是大寫的標簽名

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

過不不能操控的元素有margin,display

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

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

代碼:

    
    
    




    

        
            作品
        
        

            
js
            
CSS
            
啊可接受的管理會計ad佛羅倫薩放得開是龍卷風的恐懼感
        
    
    

        
            博客
        
        

            
245345345
            
346
            
啊實34534543打實大師的
        
    
    

        
            我的聯系電話
        
    

a.onclick = function (x) {
            x.preventDefault();//禁止默認動作.即禁止a標簽的默認錨點跳轉動作
        }

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默認動作.即禁止a標簽的默認錨點跳轉動作
            let a = x.currentTarget;
            console.log(a.href);
           console.log( a.getAttribute("href"));

        }

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

弄清元素距離頁面頂部的距離和距離視口頂部的距離:
頁面頂部指的是整個網頁的頂部,即隨著頁面的滾動,元素距離頁面頂部的距離不會變化.

window.scrollX

window.scrollY是網頁滾動的距離,即視口頂部距離網頁頂部的距離.

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

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

element.offsetTop是元素頂部距離網頁最上層的距離

HTMLElement.offsetTop 為只讀屬性，它返回當前元素相對于其 offsetParent 元素的頂部的距離。

offsetTop

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

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默認動作.即禁止a標簽的默認錨點跳轉動作
            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("上面兩個的和為"+(element.getBoundingClientRect().top+window.scrollY));//相加等于offsetTop
            console.log("element.offsetTop為:"+element.offsetTop)//只讀屬性

        }

窗口移動到相應位置(網頁左上角的移動到(x,y)

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

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