div由於溢出而不會在滾動中消失：hidden / auto

Question

我有這個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);
    }
  });
});

在將標題隱藏在滾動條上時效果很好，但是增加了一些高度：100％; 到html，body和“ content div”，並​​且在html和body上隱藏了溢出，並且在“ content div”上自動隱藏了此JavaScript。

知道為什么此javascript無法正常工作嗎？ 並有解決方法或其他方法可以使標題在滾動時淡出嗎？

提前致謝

編輯----

一個JsFiddle- http://jsfiddle.net/sturobson/AMJFG/

更少CSS的更新小提琴-http: //jsfiddle.net/sturobson/AMJFG/1/

Answer 1

您的腳本對我有用。

但是，如果您想嘗試其他方法，請根據自己的方法嘗試以下方法，但要稍微簡化一下：

$(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();
};