Question

我有一个Q，我有一个任务，我只允许使用php，css和javascrip。我在java脚本中真的很新。但我的问题是如何制作一个导航栏，当你向下滚动时，它的颜色渐渐消失，我希望它是一个单页的网站。 PS。我不被允许使用Jquery

Answer 1

您可以使用JQuery库来解决此问题，它使您可以使用某种服务器端语言执行多项动态操作。

以下是使用淡入淡出某些div进行滚动的示例，我发现它在Google上为您查找：

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

导航栏，当您向下滚动

1 个答案: