分區淡入和淡出在滾動

我真的瘋了這個。我不知道爲什麼<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

來源

2014-11-21 Tiago Além-Mar

你的頁面一點兒也不具有足夠的內容來actualy做滾動，你需要更多的內容。 – 2014-11-21 21:01:41

我有內容，我只是沒有把代碼放在那裏，抱歉不提。 – 2014-11-21 21:16:15

看看這裏，https://github.com/oussamaelgoumri/fixed_header，它會向頁面添加一個固定標題，當您向下滾動時，然後在向上滾動時將其刪除。 – 2014-11-21 21:27:35

您的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">

來源

2014-11-21 20:45:01

仍然一樣：/我真的很沮喪... – 2014-11-21 21:16:38

那麼，你的代碼在這裏工作：http://jsfiddle.net/79h7zvhs/ – 2014-11-21 21:20:49

也許這是最好的顯示完整的代碼http://codepen.io/anon/pen/Kwwbja – 2014-11-21 21:27:28

將更多內容添加到您的網頁，以便您實際上有滾動條。

然後更新您的腳本

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

來源

2014-11-21 21:10:28

分區淡入和淡出在滾動

回答

相關問題