javascript - z-index 停止滚动页面的标题会影响页面内的其他滚动条

Question

我正在使用 z-index 停止滚动页面的标题，如下所示

.headerscrolling{
z-index:9005;
}

我还在页面中心使用 niceScroll Jquery，它将使用以下命令根据 div(比如 id=innerscroll)内容动态创建滚动条。

<div id="innerscroll">

&Jquery 是

$("#innerscroll").getNiceScroll().resize();

现在的问题是，Nice Scroll bar 上升了 innerscroll div header 的像素高度。请建议我可以做些什么来克服这个问题

注意:如果我不使用 z-index ，它工作正常；

图表中的 PFB 问题:

Answer 1

这里的固定标题菜单是滚动时下拉的重复菜单。

Js

var lastScrollPosition = 0;

    function handleScroll(){
    setTimeout(function(){
        var currentScrollPosition = window.pageYOffset;
        (currentScrollPosition - lastScrollPosition > 0) ? handleScrollDown() : handleScrollUp();   
        lastScrollPosition = currentScrollPosition;
    },0);

}

function handleScrollDown(){

    //if header menu is not in view then no point in checking if it is going out of view
    if(!isheaderMenuTopInView) return;      
    //console.log('inview going out');
    var windowTop = $(window).scrollTop(),
    headerMenuTop = $('#header-menu').offset().top,
    headerMenuBottom = headerMenuTop + $('#header-menu').height();
    if(headerMenuBottom < (windowTop+$('#fixed-header-menu').height())) {
        //console.log('went out of view');
        $('#fixed-header-menu').show(0);
        isheaderMenuTopInView = false;
    }
}

function handleScrollUp(){

    //if header menu is in view then no point in checking if it is coming in view
    if(isheaderMenuTopInView) return;
    //console.log('not in view coming in');
    var windowTop = $(window).scrollTop(),
    headerMenuTop = $('#header-menu').offset().top,
    headerMenuBottom = headerMenuTop + $('#header-menu').height();
    if(headerMenuBottom > (windowTop+$('#fixed-header-menu').height())){
        //console.log('came in view');
        $('#fixed-header-menu').hide(0);
        isheaderMenuTopInView = true;
    }
}

固定标题菜单是标题菜单的副本

<div id = 'headerContainer' class = 'span-12-of-12'>
    <nav>
        <div id = 'fixed-header-menu' class = 'span-12-of-12 menu section group'>                       
            <img class = 'menu-bg' src = './res/MenuBar.png' />
            <div class = 'col span-1-of-5 menu-item'><img src = './res/home.png' />Home</div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/aboutUs.png' />About Us</div>
            <div class = 'posture-position pp1 menu-item col span-1-of-5'>
                <img class = 'p1' src = './res/posture/p1.png' />
                <img class = 'p2' src = './res/posture/p12.png' />
            </div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/contactUs.png' />Contact Us</div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/gallery.png' />Gallery</div>     
        </div>  
    </nav>

    <div class = 'section group'>                   
        <div class='logo-name  span-3-of-12'>
            <img src = './res/LogoName.png' />
        </div>                  
    </div>  
    <nav>
        <div id = 'header-menu' class = 'menu section group'>                       
            <img class = 'menu-bg' src = './res/MenuBar.png' />
            <div class = 'col span-1-of-5 menu-item'><img src = './res/home.png' />Home</div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/aboutUs.png' />About Us</div>
            <div class = 'posture-position pp1 menu-item col span-1-of-5'>
                <img class = 'p1' src = './res/posture/p1.png' />
                <img class = 'p2' src = './res/posture/p12.png' />
            </div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/contactUs.png' />Contact Us</div>
            <div class = 'col span-1-of-5 menu-item'><img src = './res/gallery.png' />Gallery</div>     
        </div>  
    </nav>
</div> 

如果你有任何疑问，请回来