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

Change opacity of header DIV using YUI

本文关键字：不透明度 DIV 标题 YUI 改变 使用      更新时间：2023-09-26

嘿，我有一个div与"#header1"，我想保持在页面的顶部，当用户向下滚动。现在，我设法让div粘在"#header1"上使用"position:fixed"滚动到顶部，我现在想做的是改变"#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);
});

您可以尝试如下操作:

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;
    }
});

演示小提琴

相关文章：