Html CSS-如何设置用户滚动时显示的div

我目前有一个网站在，它有一个全屏旋转木马在引导。当用户向下滚动时，我想要一个半透明的div向上滑动。这是我目前拥有的代码：

<style>
        html, body { height:100%; }
        .carousel, .item, .active { height:100%; position:fixed; }
        .carousel-inner { height:100%; }

        @media screen and ( max-width: 350px ) {
            .carousel-caption {
                margin-bottom: 10%;
            }
        }

        @media screen and ( min-width: 350px ) {
            .carousel-caption {
                margin-bottom: 15%;
            }
        }

        #nav {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            margin-top: 20px;
            margin-bottom: -90px;
        }

        #content {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.85);
            top: 0;
            left: 0;
            right: 0;
            z-index: 5;
            margin-top: 100%;
        }
    </style>

html，正文{高度：100%；}
.carousel、.item、.active{高度：100%；位置：固定；}
.carousel内部{高度：100%；}
@媒体屏幕和屏幕（最大宽度：350px）{
.旋转木马标题{
利润底部：10%；
}
}
@媒体屏幕和屏幕（最小宽度：350px）{
.旋转木马标题{
利润底部：15%；
}
}
#导航{
位置：绝对位置；
排名：0；
左：0；
右：0；
z指数：10；
边缘顶部：20px；
边缘底部：-90px；
}
#内容{
位置：绝对位置；
背景色：rgba（255、255、255、0.85）；
排名：0；
左：0；
右：0；
z指数：5；
利润率最高：100%；
}

网站上的3个导航按钮如下所示：

<div id="nav" class="container">

旋转木马是这样的：

<div id="carousel" class="carousel slide" data-interval="9000" data-ride="carousel">

我想要幻灯片上的div是：

<div class="row" id="content">

如果你在网站上看，div可能会出现，如果你调整窗口大小（我不知道为什么）。我正在使用推特引导，并希望该网站的反应。 有人明白我的意思吗，或者有可能的解决办法吗

编辑： 用户名是guest 密码是橙色的

---

很抱歉，我忘了包括它们…

您需要使用

scrollTop

和

scroll

演示

---

您可以使用jQuery进行以下操作：

$(document).scroll(function(){
    $("body").addClass("scrolled");
});

在CSS中：

body div.yourclass{
    transition:transform 0.3s ease;
    transform:translate(100%);
}
body.scrolled div.yourclass{
    transform:translate(0);
}

---

只使用CSS的解决方案将非常困难，更不是说不可能。

谢谢，但它并不是真正的菜单。这是一长串的文字。请以该网站为例。（客人：橙色）

body div.yourclass{
    transition:transform 0.3s ease;
    transform:translate(100%);
}
body.scrolled div.yourclass{
    transform:translate(0);
}