javascript - 向下滚动时颜色会淡出的导航栏

Question

我有一个问题，我有一个任务，我只允许使用 php、css 和 javascrip。我真的是 java 脚本的新手。但我的问题是如何制作一个导航栏，当你向下滚动时，它的颜色会淡出，我希望它是一个单页网站。附言。我不允许使用 Jquery

Answer 1

你可以使用 JQuery 库来解决这个问题，它让你有可能用一些服务器端语言做一些动态的事情。

这里是一个滚动的例子，带有一些 div 的淡入淡出，我在谷歌上为你找到了它:

HTML:

<div id="container">

<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>

CSS:

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

JQuery:

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});
});

here the link for example