Изменение непрозрачности заголовка DIV с помощью YUI

#javascript #html #css #scroll

#javascript #HTML #css #прокрутка

Вопрос:

Привет, у меня есть div с «#header1», который я хотел бы сохранить в верхней части страницы, когда пользователь прокручивает вниз. Теперь мне удалось переместить указатель div в начало при прокрутке, используя «position: fixed» на «#header1», и то, что я хотел бы сделать сейчас, это изменить непрозрачность «#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);
});

Ответ №1:

Вы можете попробовать что-то вроде следующего:

 var notScrolled = true;
var headerTop = $('header').height(); // header size
$(window).scroll(function () {        
    var scrollTop = $(window).scrollTop();
    if (scrollTop > headerTop amp;amp; notScrolled) {
        $('header').css('opacity',0.2);
        notScrolled = false;
    } else if (scrollTop < headerTop amp;amp; !notScrolled){
        $('header').css('opacity',1);
        notScrolled = true;
    }
});