Css 将一个div滑动到另一个div下，如果它们具有部分不透明度_Css_Menu_Opacity

Css 将一个div滑动到另一个div下，如果它们具有部分不透明度

css menu

Css 将一个div滑动到另一个div下，如果它们具有部分不透明度,css,menu,opacity,Css,Menu,Opacity,我有以下问题：我有一个水平菜单，下面有一个子菜单。我希望子菜单在主菜单下向上滑动。通常这一点都没有问题，只需将子菜单放在较低的z索引上，然后将其向上移动即可。但在这种情况下，菜单和子菜单都有部分不透明度。现在，当我向上移动子菜单时，您仍然可以通过主导航看到它的显示我需要做的是，当子菜单向上移动时，使主菜单下的部分不可见有一个动画gif显示正确的行为和外观有什么想法吗？谢谢 [添加] 这是我的演示代码。CSS： body { margin: 0; padding: 0; back

我有以下问题：我有一个水平菜单，下面有一个子菜单。我希望子菜单在主菜单下向上滑动。通常这一点都没有问题，只需将子菜单放在较低的z索引上，然后将其向上移动即可。但在这种情况下，菜单和子菜单都有部分不透明度。现在，当我向上移动子菜单时，您仍然可以通过主导航看到它的显示

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

有一个动画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>


菜单1 |菜单2 |菜单3 |菜单4
子菜单1 |子菜单2 |子菜单3 |子菜单4
这里是主要内容！
注意，当您滚动此页面时，子菜单在主菜单下仍然可见？我需要它被剪辑，因为它在主菜单下移动*我想在不使用JavaScript的情况下实现这一点。可以在主导航下查看主文本。
这是一个动画gif，希望能显示我所追求的。。。
这是一个成功的例子，它是一个成功的例子。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择
这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择
这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择

我现在已经在JSFIDLE上发布了演示代码。它具有正确的行为，除了主导航下方的副导航部分应不可见，并且主导航的半透明性不应受到影响。

此示例并不准确，但它应该为您指明正确的方向：

HTML

隐藏在卷轴上

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

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

必须为两个div设置

z-index

值，并且必须为较低的div设置较大的

z-index

值，还必须将底部div的溢出设置为可见

例如：

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

这里有两件事在起作用

1.Z索引顶部菜单需要呈现在堆栈中的子菜单上方。现在，由于简单的HTML排序，您的子菜单呈现在topmenu的上方

我们通过z索引解决了这一问题：

#topmenu
{
    z-index: 999;
}

#submenu
{
    z-index: 998;
}

2.不透明度在您提供的示例（）中，topmenu具有完全不透明的背景。为了在子菜单经过顶部菜单后完全隐藏子菜单，我们需要1具有完全不透明的背景：

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

脚注：

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

请发布相关代码，最好是在JSFIDLE:）当然！有一把小提琴在演奏。这正是我想要的，除了主菜单下无法显示子菜单。谢谢，但我不认为这样做。我已经为我的问题添加了示例代码和一个JSFIDLE链接，看看这是否能让问题更清楚。谢谢！这很接近，但是当页面滚动时，子导航必须向上移动。我已经在上面添加了示例代码。嗨，我添加了一些JS并更新了fiddle，为您展示了一个滚动示例代码。谢谢！我真的希望用纯CSS，而不是JavaScript来实现这一点。但我想我别无选择。我知道css没有一个类似于scrollTop的东西。如果这能解决你的问题，我会

#topmenu
{
    z-index: 999;
}

#submenu
{
    z-index: 998;
}

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