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

Question

我目前有一个网站 http://webdevtutorials.net它有一个用 Bootstrap 制作的全屏轮播。当用户向下滚动时，我想要一个半透明的 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 bootstrap 并希望该网站能够响应。有谁明白我的意思或有可能的解决方案吗？

编辑:用户名是guest密码是橙色的对不起，我忘了包括他们......

Answer 1

您需要使用scrollTop 和scroll

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

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

});