0

我目前在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 引导程序，并希望该网站能够响应。有谁明白我的意思或有可能的解决方案？

编辑：用户名是客人密码是橙色对不起我忘了包括他们......

4

2 回答 2

0

你需要使用scrollTop和scroll

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

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

});
于 2013-11-10T19:11:21.597 回答
0

您可以为此使用 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 的解决方案将非常困难，更不用说不可能了。

于 2013-11-10T19:11:31.753 回答