如何在滚动时顺利改变CSS属性？

-2

我有一个任务 - 我的导航块有背景属性background: rgba(0,0,0, 0); 我需要在滚动时将其不透明度从0改变为1，它没有问题，但动画结束（我的意思是背景的不透明度将达到1 ）是一些区块的底部边框如何在滚动时顺利改变CSS属性？

所以这是我HTML代码

<header> 
    <nav>...</nav> 
</header>

header具有灵活的高度。 nav的高度为100px。所以我需要我的nav`s背景不透明度达到1时scrollTop的值将是：

$('header').height() - $(nav).height();

https://jsfiddle.net/zzvns9hy/7/

来源

2015-04-17 user3768359

你能在的jsfiddle创建一个例子吗？ – larssy1

https://jsfiddle.net/zzvns9hy/7/ – user3768359

我以为你的问题是关于JQuery，它不包含在jsfiddle中。 – larssy1

你可以做这样的事情

HTML

<header> 
    <nav></nav> 
</header>

CSS

nav { 
    width:100px; 
    height:100px; 
}

SCRIPT

$(window).scroll(function() { 
    // what is the position of nav from the top of the document 
    var NavTop = Math.floor($(document).scrollTop() - $('nav').offset().top); 
    // From 0 to 1, how much is nav scrolled 
    var NavScroll = NavTop/$('nav').height(); 

    $('nav').css('background-color','rgba(255,0,0,'+NavScroll+')'); 
});

http://jsfiddle.net/an50e93p/

来源

2015-04-17 13:33:44 Raoulito

如何在滚动时顺利改变CSS属性？

回答

相关问题