0

私はこの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およびautoが' content div'に隠されているため、このJavaScriptは機能しなくなります。

このJavaScriptが機能しない理由はありますか？そして、スクロール時にヘッダーがフェードアウトするようにするための修正または他の方法はありますか？

前もって感謝します

編集 - -

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

CSSが少ない新しいフィドル-http://jsfiddle.net/sturobson/AMJFG/1/

4

1 に答える 1

0

あなたのスクリプトは私のために働きます。

ただし、別の方法を試したい場合は、自分の方法に基づいて、少し簡略化して、以下を試してください。

$(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();
};
于 2012-05-24T20:26:33.007 に答える