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，并希望该网站具有响应能力。有谁理解我的意思或有可能的解决方案？

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

Answer 1

您需要使用scrollTop和scroll

DEMO http://jsfiddle.net/ZyKar/529/

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

});

Answer 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解决方案将非常困难，并非不可能。

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

2 个答案: