Question

我真的很生气。我不知道为什么我要淡入的<div>不会消失。

$(window).bind("scroll", function() {
if ($(this).scrollTop() > 520) {
    $("#bg").fadeIn();
} else {
    $("#bg").stop().fadeOut();
}

HTML

<div class="header">

    <div id="bg"></div>     
    <div class="logo"><img src="img/logoW.png"></div>
    <div id="menu">
        <ul class="nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/work/">Work</a></li>
            <li><a href="/clients/">Clients</a></li>
            <li><a href="/contact/">Contact</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </div>

</div>

CSS

.header{
    position: fixed;
    width: 100%;
    height: 50px;
    text-transform: uppercase;
    font-size: 12px;
    z-index: 11;
}

#bg{
    position: fixed;
    display: none;
    background: #262626;
    width: 100%;
    height: 50px;
    z-index: 10;
}

.menu{
    position: fixed;
    width: 90%;
    height: 50px;
    z-index: 11;
}

.logo{
    position: fixed;
    width: 94px;
    height: 50px;
    left: 10%;
    top: 0;
    z-index: 11;
}
.nav{
    list-style:none;
    text-align:right;
    width: 90%;
    z-index: 11;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
    margin: 6px 0 6px 0;
}

我尝试了不同的代码，但是我无法使其工作，这可能非常简单，我最终会感到愚蠢。

我有一个纯CSS视差效果，它会干扰滚动吗？

完整代码codepen.io/anon/pen/Kwwbja

Answer 1

您的javascript缺少其结束标记，它应该看起来像这样。

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 520) {
        $("#bg").fadeIn();
    } else {
        $("#bg").stop().fadeOut();
    }
});

您还没有正确关闭img代码。它看起来应该是这样的。 <img src="img/logoW.png"/>

不喜欢这个。 <img src="img/logoW.png">

Answer 2

为您的网页添加更多内容，这样您就可以实际使用滚动条。

然后将脚本更新为

<script>
    $(window).scroll(function() {
        if ($(this).scrollTop() > 520) {
            $("#bg").fadeIn();
        } else {
            $("#bg").stop().fadeOut();
        }
    });
</script>

在幻灯片上划分fadeIn和fadeOut

2 个答案: