Прозрачность элемента затухания при прокрутке на основе ширины окна

Question

Я пытаюсь затухать в элементе, основанном на том, что когда он впервые входит в окно просмотра, тогда он будет равен 100% непрозрачности к тому времени, когда он попадет в конец окна просмотра. Я работаю до достижения 100% непрозрачности, когда он доходит до конца. Однако, когда он начинает оживлять, он начинается примерно на 60%, что я знаю, потому что я основываю его на позиции прокрутки. Итак, мой вопрос в том, как я могу вычислить непрозрачность, начиная с 0, как только она войдет в окно просмотра?

Это то, что я до сих пор:

$('.left-cont').each(function() { 
    var $this  = $(this), 
     leftPos = $this.offset().left, 
     fadeStart = leftPos - winWidth, 
     fadeUntil = leftPos, 
     opacity; 

     console.log(winWidth - (leftPos - scrollPos)); 
     console.log(fadeStart); 

    if(scrollPos <= fadeStart) { 
     opacity = 0; 
    } 
    else { 
     opacity = scrollPos/fadeUntil; 
    } 

    $this.css({ 
     'opacity': opacity 
    }); 
}); 

Я могу предоставить больше контекста, если это необходимо. Любая помощь приветствуется.

Answer 1

1) Является ли эта функция jQuery выполняемой только один раз или она помещается внутри функции привязки onScroll?

$(window).scroll(function() { 

    /* get scroll top and left values here */ 

    $(".box").each(function(){ 

    /* do position check and css adjustments here */ 

    }); 

}); 

2) Расчет для непрозрачности: (1 - ((box_offsetTop - scrollTop)/windowHeight))

3) Я сделал рабочий пример здесь для прокрутки по вертикали: http://jsfiddle.net/0mks8eut/1/

Вы можете изменить его, чтобы вычислить непрозрачность на основе горизонтального прокрутка (un) комментирование другого вычисления внутри функции.

! Убедитесь, что после/рядом с объектом достаточно содержимого (или заполнения/поля). В противном случае он никогда не достигнет opacity:1 (например, сверху/слева от экрана).