Question

我有以下问题：我有一个水平菜单，下面有一个子菜单。我希望子菜单在主菜单下滑动。通常这根本不是问题，只需将子菜单放在较低的z-index上并将其向上移动即可。但在这种情况下，菜单和子菜单都具有部分不透明度。现在，当我移动子菜单时，你仍然可以通过主导航显示它。

我需要做的是当子菜单向上移动时使主菜单下的部分不可见。

有一个动画gif在http://i.stack.imgur.com/1n4jJ.gif

显示正确的行为和外观

有什么想法吗？谢谢！

[其他]

这是我的演示代码。 CSS：

body {
  margin: 0;
  padding: 0;
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
}
#topmenu {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: rgba(255,255,255,0.5);
}

#submenu {
  position: relative;
  width: 100%;
  height: 50px;
  top: 50px;
  padding-top: 10px;
  background-color: rgba(255,255,255,0.5);
  border-top: 1px solid #666666;
}
#main {
  position: relative;
  top: 60px;
}

HTML：

<body>
  <div id="topmenu">Menu 1 | Menu 2 | Menu 3 | Menu 4</div>
  <div id="submenu">Sub menu 1 | Sub menu 2 | Sub menu 3 | Sub menu 4</div>
  <div id="main">
    <h1>Here is the main content!</h1>
    <p><strong>Notice how when you scroll this page the sub menu is still visible under the main menu? I need it to be clipped as it moves under the main menu. *AND* I want to do this without JavaScript. It's OK to see the main text under the main nav.</strong></p>

    <h2>Here's an animated gif that hopefully shows what I'm after...</h2>
    <img src="http://i.stack.imgur.com/1n4jJ.gif" alt="sliding nav demo" />
    <p>Lorem ipsum dolor sit amet, consecetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
  </div>

</body>

我现在在http://jsfiddle.net/chrisspurgeon/6ddWz/的JSFiddle上编写了演示代码。它具有正确的行为，除了主导航下的子导航部分应该是不可见的，主导航的半透明不应该受到影响。

Answer 1

这个例子并不准确，但它应该让你朝着正确的方向前进：Updated Fiddle

HTML

<div id="header">Hover this.
    <div id="drop">Drop content here</div>
</div>

CSS

#drop {
    background: rgba(0, 0, 0, .5);
    color: white;
    height: 0;
    overflow: hidden;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    position: absolute;

}

隐藏滚动

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 0) { 
            $("#drop").css('height', '0');

        } 
        else {     
            $("#drop").css('height', '20px');
        }  
    });
});

Answer 2

您必须为两个div设置z-index值，并且必须为较低的div提供更大的z-index值，同时您必须将底部div的溢出设置为可见。

示例：

.upperdiv {z-index:5;}
.bottomdiv {z-index:100;overflow:visible;}

Answer 3

这里有两件事在起作用。

1。 Z-索引

topmenu需要在堆栈中的子菜单上面。现在，由于简单的HTML排序，您的子菜单将呈现在topmenu之上。

我们用z-indexing解决了这个问题：

#topmenu
{
    z-index: 999;
}

#submenu
{
    z-index: 998;
}

2。不透明度

在您提供的示例（this GIF）中，topmenu具有完全不透明的背景。为了在子菜单通过topmenu后完全隐藏子菜单，我们需要¹ 才能拥有完全不透明的背景：

#topmenu
{
    background: rgba(255, 255, 255, 1);
}

JSFiddle

脚注：

1：仅当您需要无JS解决方案时。如果你允许使用JS，那么有些解决方案可以让你使用部分透明的背景。

当div具有部分不透明度时，在另一个div下滑动div

3 个答案:

1。 Z-索引

2。不透明度

JSFiddle

脚注：