我目前有一个网站 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 密码是橙色的 对不起,我忘了包括他们......
最佳答案
您需要使用scrollTop
和scroll
演示 http://jsfiddle.net/ZyKar/529/
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 300) {
$('.bottomMenu').slideDown();
} else {
$('.bottomMenu').slideUp();
}
});
关于html - CSS-如何设置div在用户滚动时出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19893792/