用Javascript更新（style.top）浮動菜單的位置

Question

我正在使用JavaScript進行浮動菜單設置，假設用戶向下滾動或調整窗口大小時，該菜單將保持不變。

到目前為止，它在X位置工作正常。 但是，我找不到使它固定在相對於窗口頂部可見的位置的方法。 問題是當我向下滾動菜單時消失，因為它保持與窗口大小有關的距離。

我的代碼是：

    menuPosition : function (){
        var windowHeight = document.body.clientHeight;
        var windowWidth = document.body.clientWidth;
        var xPosFloatingMenu = (windowWidth) - (fMenuWidthGlobal + fMenuXPosGlobal);
        var yPosFloatingMenu = (windowHeight) - (windowHeight - fMenuYPosGlobal);
        document.getElementById("floating_menu").style.left = (xPosFloatingMenu) + "px";
        document.getElementById("floating_menu").style.top = (yPosFloatingMenu) + "px";


    },

    updateMenuPosition : function () {
        var menuPositionInterval = setInterval(gala.create.menuPosition,1);
    } 

有沒有辦法使菜單位置相對於窗口的可見頂部保持更新？

Answer 1

您必須在窗口滾動Event上更新float_menu元素的樣式屬性。

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll