Как начать подсчет jquery при передаче div вместо верхней части страницы? - PullRequest
Новая
       20

Как начать подсчет jquery при передаче div вместо верхней части страницы?

0 голосов
/ 28 февраля 2020

Я пытаюсь выяснить, как заставить следующий скрипт начать подсчет непрозрачности при пропуске окружающего контейнера #box вместо того, чтобы начать подсчет непрозрачности в самой верхней части страницы.

Любой есть подсказка?

Сценарий: 

function parallaxFade() {
    scrollPos = $(this).scrollTop();
    $('#boxtext').css({
        'opacity': 1-(scrollPos/100)
    });
}

HTML: 

<div class="box" id="box">
    <h3 class="boxtext" id="boxtext">Heading</h3>
</div>

1 Ответ

0 голосов
/ 29 февраля 2020

Мы можем сравнить позицию прокрутки (здесь ScrollPos) с позицией #box, которую мы получаем, используя jQuery position () . Визуальный эффект здесь не будет отмечен, поэтому я сохранил его для демонстрации. Это сбивает с толку, поэтому если вам нужно изменить непрозрачность строго после контейнера #box, измените условие на: 

if (scrollPos > pos+$('#box').height()) {


function parallaxFade(pos) {
    var  opa = $('#boxtext').css('opacity');
    scrollPos = $(this).scrollTop();
    if (scrollPos > pos) {
    $('#boxtext').css({
        'opacity': 1-(scrollPos/(100+pos))
    });
    } else{
    
    $('#boxtext').css({
        'opacity': 1-(1/(100+scrollPos))
    });
    }
    //console.log(opa);
}
$(document).scroll(function() {
var pos = $('#box').position().top;
parallaxFade(pos);
});
.box{
width:200px;
height:200px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ipsum">
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<div class="box" id="box">
    <h3 class="boxtext" id="boxtext">Heading</h3>
</div>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>    <p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>    <p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum</p>

</div>
...