Question

我得到了这个 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);
    }
  });
});

它将页眉隐藏在卷轴上,但增加了一定的高度:100%;在html、身体和内容中,隐藏在html、身体和内容的外溢部分隐藏在html和身体上;在内容中,隐藏在内容上,显示该javascript不再起作用。

知道为什么这个刺青不起作用吗? 是否有固定方法或其他方法可以让页眉在滚动时消失?

提前感谢

编辑 - - -

AJFiddle - < a href=>http://jsfiddle.net/sturobson/AMJFG/" rel="no follow">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();
};

友情链接