今天要講的是當滾輪滾到某個位置時，
改變最上方的css樣式。
css給大家參考

.container {
    background-color: steelblue;
    margin-top: 50px;
    height: 500px;
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
}
.newClass {
    background-color: gray;
    color: white;
}

html

    <div x-data="{atTop:true}">
        <nav class="nav" :class="{'newClass' : !atTop}" @scroll.window="atTop= (window.pageYOffset>20) ? false:true">
            top nav goes here
        </nav>
        <div class="container">
            texttexttexttext
        </div>
    </div>

我先用css把div的高度撐高，
為了要有上下卷軸可以滾。
這裡預設x-data="{atTop:true}"，
因為一進畫面一定在最上方，
重點之一在:class="{'newClass' : !atTop}"
這的意思是只要條件符合(!atTop)，此標籤就會加上指定的class(newClass)；
atTop不是true(即false)這標籤就會出現newClass的class；
重點之二在@scroll.window="atTop= (window.pageYOffset>20) ? false:true"，
這裡判斷在滾動卷軸時atTop為true或是false，
(window.pageYOffset>20) ? false:true
翻譯：
這頁的y軸滾超過最上面20px嗎?
是的，atTop=false；
不是呦，atTop=true；

如此一來就可以根據滾輪高度來變換不同的css，
看起來就會很有互動效果了喔!