这实际上是两个问题:
display:none;
过渡到display:block;
无效?scrolling 200px
之后从顶部开始,即滚动过“红框”之后?非常感谢任何帮助,非常感谢!
$(window).scroll(function() {
$('#menu').css('display', 'block');
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('#menu').css('display', 'none');
}, 1500));
});
html {
padding:0;margin:0;
}
body {
height:2000px
}
#redBox{
height:200px;
width:100%;
background:red;
float:left;
color:white;
text-align:center;
line-height:8em;
font-size:1.2em;
}
#menu {
position:fixed;
top:0;
width: 100%;
height: 200px;
background: navy;
opacity: .5;
color:white;
text-align:center;
line-height:8em;
font-size:1.2em;
display: none;
-webkit-transition:all 1s;
transition:all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="redBox">scroll function should start below this box (height: 200px)</div>
<div id="menu">scroll menu</div>
答案 0 :(得分:2)
1)您可以使用jQuery fadeIn
和fadeOut
2)或
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 200) {
$('#menu').fadeIn('slow');
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
$('#menu').fadeOut('slow');
}, 1500));
}else{
clearTimeout($.data(this, 'scrollTimer'));
$('#menu').fadeOut('slow');
}
});
答案 1 :(得分:0)
CSS(第1点):
html{
padding:0;margin:0;
}
body{
height:2000px
}
#redBox{
height:200px;
width:100%;
background:red;
float:left;
color:white;
text-align:center;
line-height:8em;
font-size:1.2em;
}
#menu {
position:fixed;
top:0;
width: 100%;
height: 200px;
background: navy;
color:white;text-align:center;line-height:8em;font-size:1.2em;
display: none;
}
Javascript(第2点):
$(document).ready(function() {
var headerTop = $('body').offset().top;
var headerBottom = headerTop + 200;
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > headerBottom) {
if (($("#menu").is(":visible") === false)) {
$('#menu').fadeIn('slow');
}
} else {
if ($("#menu").is(":visible")) {
$('#menu').fadeOut('fast');
}
}
});
});
已经过测试。享受!
答案 2 :(得分:0)
我认为这就是你想要的:
var startAfter = 200,
menuIsVisible = false;
$(window).scroll(function() {
if($(document).scrollTop() > startAfter && !menuIsVisible) {
$("#menu").fadeIn(1000, function(){
menuIsVisible = true;
});
}
else if ($(document).scrollTop() <= startAfter && menuIsVisible) {
$("#menu").fadeOut(1000, function(){
menuIsVisible = false;
});
}
});