javascript - 加载后更改 z-index

Question

我有一个函数，当用户滚动以检查 scrollTop() 并在发生特定滚动后，它将菜单的 z-index 从 -1 更改为 1。但是，这只发生在滚动时，因此如果用户刷新站点在下一次滚动发生之前，该菜单实际上是无法使用的。

有没有办法让我调用它并检查滚动的屏幕量（在刷新而不是用户滚动之后）是否符合更改 z-index 的标准？

我的 JS：

    function getPosition(){
       var y = $(window).scrollTop();
       var status = (y > 880) ? true : false;
       //console.log(status);
       if(status)
           $('#actual-menu').css('z-index', 1);
       else
           $('#actual-menu').css('z-index', -1);
   }

Answer 1

只需getPosition在您的ready活动中运行。

运行示例

变量限制 = 50；

$(function () {

    function getPosition() {
             var y = $(window).scrollTop();
             var status = (y > limit) ? true : false;

             if (status) {
                     $('#actual-menu').css('zIndex', 1);
             } else {
                     $('#actual-menu').css('zIndex', -1);
             }
    }

    $(document).on('scroll', getPosition);

    getPosition();
});

Answer 2

z-index 属性对非定位元素没有影响，该元素必须是相对定位、绝对定位或固定的。将您的行替换为：

尝试先添加这个，

$("#actual-menu").css('position', 'relative');

$('#actual-menu').css('z-index', 1);