Javascript 使用YUI更改标题DIV的不透明度

Javascript 使用YUI更改标题DIV的不透明度,javascript,html,css,scroll,Javascript,Html,Css,Scroll,嘿,我有一个带有“#header1”的div,当用户向下滚动时,我希望它保持在页面顶部。现在,我使用“#header1”上的“position:fixed”将div粘贴到滚动时的顶部,现在我想做的是在向下滚动时更改“#header1”的不透明度,如果向上滚动,则返回到不透明状态。我以前发布过我的代码,但后来知道我们只能使用YUI。任何建议都会有帮助。说到YUI,我完全是个新手 HTML: <div id="header1">Hello</div> CSS: #head

嘿,我有一个带有“#header1”的div,当用户向下滚动时,我希望它保持在页面顶部。现在,我使用“#header1”上的“position:fixed”将div粘贴到滚动时的顶部,现在我想做的是在向下滚动时更改“#header1”的不透明度,如果向上滚动,则返回到不透明状态。我以前发布过我的代码,但后来知道我们只能使用YUI。任何建议都会有帮助。说到YUI,我完全是个新手

HTML:
<div id="header1">Hello</div> 

CSS:
#header1 {
     position: fixed;
     top:0px;
     z-index:1000;
     margin:0;
     padding:10px;
 }
JS:
var target = $('div#header1');
var targetHeight = target.height();


var scrollRange = maxScroll/(target.length-1);

$(document).scroll(function(e){
    var scrollY = $(window).scrollTop();
    var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange;
    var divIndex = Math.floor(scrollY/scrollRange);

    target.has(':lt(' + divIndex + ')').css('opacity', 0);
    target.eq(divIndex).css('opacity', scrollPercent);
    target.has(':gt(' + divIndex + ')').css('opacity', 1);
});
HTML:
你好
CSS:
#校长1{
位置:固定;
顶部:0px;
z指数:1000;
保证金:0;
填充:10px;
}
JS:
var目标=$('div#header1');
var targetHeight=target.height();
var scrollRange=maxScroll/(target.length-1);
$(文档)。滚动(功能(e){
var scrollY=$(window.scrollTop();
变量scrollPercent=(scrollRange-scrollY%scrollRange)/scrollRange;
var DIVIDEX=数学地板(滚动/滚动范围);
target.has(':lt('+dividex+')).css('opacity',0);
target.eq(divIndex.css('opacity',scrollPercent));
target.has(':gt('+dividex+')).css('opacity',1);
});

您可以尝试以下方法:

var notScrolled = true;
var headerTop = $('header').height(); // header size
$(window).scroll(function () {        
    var scrollTop = $(window).scrollTop();
    if (scrollTop > headerTop && notScrolled) {
        $('header').css('opacity',0.2);
        notScrolled = false;
    } else if (scrollTop < headerTop && !notScrolled){
        $('header').css('opacity',1);
        notScrolled = true;
    }
});
var notScrolled=true;
var headerTop=$('header').height();//标题大小
$(窗口)。滚动(函数(){
var scrollTop=$(窗口).scrollTop();
如果(滚动顶部>标题顶部(&N)未滚动){
$('header').css('opacity',0.2);
notScrolled=false;
}else if(滚动顶部

你能做腿部练习并做小提琴手吗?:-)您尚未声明
containerHeight
变量。