嘿,我有一个带有“#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);
});
答案 0 :(得分: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;
}
});