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

z-index属性对非定位元素没有影响，元素必须相对定位，绝对定位或固定。用此替换你的行：

首先尝试添加，

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

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

Answer 2

只需在getPosition活动中运行ready。

Functioning Example

var limit = 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();
});

加载后更改z-index

2 个答案: