[英]div not disappearing on scroll because of overflow:hidden / auto
I've got this JavaScript 我有这个JavaScript
$(window).load(function(){
var $menu = $("header");
var opacity = $menu.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$menu.animate({ opacity: 1 }, "slow");
}, 1400);
}
$(window).scroll(function () {
if (!$menu.is(":animated") && opacity == 1) {
$menu.animate({ opacity: 0 }, "200", fadeInCallback);
} else {
fadeInCallback.call(this);
}
});
});
It worked fine in hiding the header on scroll, but adding some height: 100%; 在将标题隐藏在滚动条上时效果很好,但是增加了一些高度:100%; to the html, body and a 'content div' with overflow hidden on html and body and auto on the 'content div' this javascript no longer works. 到html,body和“ content div”,并且在html和body上隐藏了溢出,并且在“ content div”上自动隐藏了此JavaScript。
Any idea why this javascript doesn't work? 知道为什么此javascript无法正常工作吗? And is there a fix or other way to do it so the header fades out when scrolling? 并有解决方法或其他方法可以使标题在滚动时淡出吗?
Thanks in advance 提前致谢
EDIT ---- 编辑----
A JsFiddle - http://jsfiddle.net/sturobson/AMJFG/ 一个JsFiddle- http://jsfiddle.net/sturobson/AMJFG/
A newer Fiddle with less CSS - http://jsfiddle.net/sturobson/AMJFG/1/ 更少CSS的更新小提琴-http: //jsfiddle.net/sturobson/AMJFG/1/
your script works for me. 您的脚本对我有用。
however if you want to try another method try the below, based on yours but a little simplified: 但是,如果您想尝试其他方法,请根据自己的方法尝试以下方法,但要稍微简化一下:
$(document).ready(function(){
headerFade();
});
function headerFade() {
var $menu = $("header"),
opacity = $menu.css("opacity"),
scrollStopped,
methods = {
init: function(){
$(window).scroll(function () {
(!$menu.is(":animated") && opacity == 1) ? $menu.fadeOut(200, methods.fadeInCallback()) : methods.fadeInCallback();
});
},
fadeInCallback: function(){
clearInterval(scrollStopped);
scrollStopped = setTimeout(function () {
$menu.fadeIn(600);
}, 1400);
}
};
methods.init();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.