CSS-如何设置div在用户滚动时出现答案

【问题标题】：CSS- how to set div to appear when user scrollsCSS-如何设置div在用户滚动时出现
【发布时间】：2013-11-11 04:15:20
【问题描述】：

我目前有一个网站http://webdevtutorials.net，它有一个用引导程序制作的全屏轮播。当用户向下滚动时，我想要一个半透明的 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>

网站上看到的 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（我不知道为什么）。我正在使用 twitter 引导程序，并希望该网站能够响应。有人明白我的意思或有可能的解决方案吗？

编辑：用户名是访客密码是橙色的对不起，我忘了包括它们...

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你需要使用scrollTop和scroll

演示http://jsfiddle.net/ZyKar/529/

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 300) {
        $('.bottomMenu').slideDown();
    } else {
        $('.bottomMenu').slideUp();
    }

});

【讨论】：

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

【解决方案2】：

你可以使用 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 的解决方案将非常困难，并不是说不可能。

【讨论】：