jQuery判斷頁面滾動條距離頂端位置

今天利用空閑時間，研究了一下瀏覽器滾動條的簡單控制，主要是通過jQuery獲取滾動條的位置信息，直接上代碼

1、當前窗口高度

$(window).height();

2、滾動條已滾動高度

$(window).scrollTop();

3、結合jQuery來實時獲取滾動條滾動距離信息

$(window).on('scroll',()=>{
        let $fixedheader = $('#topface'); // fixed容器
        // console.log(fixedheader);
        var wintop=$(window).scrollTop(); // 已滾動卷去的高度
        //console.log(wintop);
        let winHeight = $(window).height(); // 可視窗口的高度
        //console.log(winHeight);
        // 卷去一個可視窗口高度后執行
        /* if (wintop - winHeight > 0) {
            // fixedheader.hide();
            $fixedheader.addClass("showtopface");
        } else {
            // fixedheader.show();
            $fixedheader.removeClass("showtopface");
        } */
        // 當滾動條離頂部100像素時的條件判斷和執行動作
        if(wintop>100){
            // fixedheader.hide();
            $fixedheader.addClass("showtopface");
        } else {
            // fixedheader.show();
            $fixedheader.removeClass("showtopface");
        }

    })

通過上邊代碼，在做前端滾動條的控制時，或者滾動條滾動到離頂部指定位置高度時觸發某些動作。我這邊是當滾動到離頂部100時，給html標簽增加樣式showtopface，否則移除html標簽樣式showtopface