一旦div 1变粘,改变div 2的z-index

时间:2017-11-30 07:52:10

标签: javascript

在这个页面http://www.younity.co.nz/testScrolling.html我需要更改从视频容器后面出现的第二个导航菜单的z-index,以便它具有更高的z-index并阻挡灰色的'Y'图形一次初始菜单已滚动页面。希望有道理。因此,我需要测试初始导航菜单是否已经开始离开浏览器的顶部或者它已经离开。

这是住房菜单1

<div class="nav-wrap-height">                            
   <div class="nav-wrap-box">
        menu
   </div>
</div>

当它滚动到顶部'.nav-wrap-height'变得粘滞

.nav-wrap-height{
   float:left;
   width:100%; 
   position:relative;
   z-index: 100;       
   position: sticky;
   top: 0;
}

我想要做的是更改第二个菜单的z-index(.nav-wrap-box#showNow)一次.nav-wrap-height已变得粘滞

<div class="cntrl-nav-2" id="showNow">
    <div class="nav-wrap-box">
        menu
   </div>
</div> 

.cntrl-nav-2{z-index:10;}

我正在尝试以下但没有得到任何结果。

<script>
        var distance = $('.nav-wrap-height').offset().top,
        $window = $(window);

        $window.scroll(function() {
            if ( $window.scrollTop() >= distance ) {
                 $('.cntrl-nav-2').css({
                       z-index:'300'
                    }); 
            }
        });
</script>

对此问题的任何帮助都会非常有帮助。 干杯 格兰特

2 个答案:

答案 0 :(得分:0)

您使用了错误的选择器

$('.nav-wrap-box.showNow') 

什么时候应该

$('.nav-wrap-box#showNow')

答案 1 :(得分:0)

这就是我追求的目标。我写z-index部分错了。

for (vector<string>::iterator it = filelist.begin(); it != filelist.end(); it++)
    fopen(it->c_str(), "rb");