需要一个聪明的CSS Z-Index叠加解决方案

Question

我有两个位置：我网站上的固定元素，我想确保根据z-index值只能看到其中一个元素。很难解释，但图像可能会帮助您理解问题：

还创建了一个演示：http://jsfiddle.net/RM9Cx/1/

div {
    height:100%;
    background:#000;
    position:relative;
    z-index:10;
}

div.gray {
    background:#c8c8c8;
    z-index:12;
}

nav {
    left:45px;
    position:fixed;
    width:150px;
    height:150px;
    background:red;
    top:50%;
    margin:-75px 0;
    z-index:11;
}

nav.white {
    background:#00fff0;
    left:90px;
    z-index:13;
}

向下滚动时，您会注意到红色div工作正常，当它到达灰色部分时，会变为隐藏状态。我需要和＃34; aqua＆＃34;同样的事情。彩色div，恰恰相反。当它到达黑色部分时，它应该被隐藏，当到达灰色部分时，它应该是可见的。

我希望这一切都有意义......

Answer 1

这仍在进行中，但它足以让社区与之合作。 http://jsfiddle.net/NicoO/RM9Cx/17/

这个想法是操纵“导航”项目的DOM顺序。我尝试识别位于顶部的当前窗格（<div>）以及后面的窗格。然后<nav>对象将放在窗格1和2中。导航的顶部偏移量是通过JS设置的，因为窗格将使用overflow：hidden;删除所需的区域。

这样可行，但仅适用于前两个窗格。剩下的问题是由于<nav>项在用户到达当前窗格的末尾之前放在以下窗格中引起的。所以我们丢失了<nav>个对象。也许有人愿意用这个来工作。

对不起，所有实验的代码都变得有些混乱......

var $elements = $("div");
var offsets = new Array();
var userScrollTop = 0;
var $topPanel = 0;
var topPanelOffset;
var $followingPanel;
var $navPrimary = $("#primary");
var $navSecondary = $("#secondary");

// Get all top offsets of div elements
$elements.each(function(){
   var thisOffset = $(this).offset().top;
   offsets.push(thisOffset);
    // We need the attribute, so don't use .data()...
   $(this).attr("data-offset",thisOffset);
});

// Append event listener on scroll
$(document).scroll(function() {
    userScrollTop = $(document).scrollTop();

    if($topPanel && $followingPanel){
       $navPrimary.css("top", Math.max(0, (($(window).height() - $navPrimary.outerHeight()) / 2) +  userScrollTop) + "px");
       $navSecondary.css("top", Math.max(0, (($(window).height() - $navPrimary.outerHeight()) / 2)  + userScrollTop) - $topPanel.outerHeight() + "px");
    }    

    // Currently most on top panel
    var closestValue = getClosestValues(offsets,userScrollTop);
    if($topPanel && $topPanel.is($('[data-offset="'+closestValue[0]+'"]')))
           return true;   

    $topPanel = $('[data-offset="'+closestValue[0]+'"]');

    if(!$topPanel.length)
        $topPanel = $("div:first-of-type");


    $followingPanel = $topPanel.next("div");
    topPanelOffset = $topPanel.offset();    

    $topPanel.append($navPrimary);
    $followingPanel.append($navSecondary); 

});