Изменение изображения во время прокрутки, когда текст становится видимым - PullRequest
Новая
       20

Изменение изображения во время прокрутки, когда текст становится видимым

1 голос
/ 29 сентября 2019

У меня есть этот скрипт, который изменяет изображения, когда text достигает верхней части экрана.Я хочу это наоборот.Я хотел бы, чтобы изображение изменилось, когда text станет видимым с определенной высоты (скажем, 50 пикселей) снизу.Как мне это сделать?

JS Fiddle: https://jsfiddle.net/ramo427e/

HTML: 

<div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1><h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1>
                </div>
                <div class="col-md-6">
                    <section id="one">
                        <div class="content">
                            <h1>first heading</h1>
                            <p>description</p>
                        </div>
                    </section>
                    <section id="two">
                        <div class="content">
                            <h1>second heading</h1>
                            <p>description</p>
                        </div>
                    </section>
                    <section id="three">
                        <div class="content">
                            <h1>third heading</h1>
                            <p>description</p>
                        </div>
                    </section>
                    <section id="four">
                        <div class="content">
                            <h1>fourth heading</h1>
                            <p>description</p>
                        </div>
                    </section>
                </div>
                <div class="col-md-6">
                    <div class="image"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1>
                </div>
            </div>
        </div>
    </div>

CSS: 

*{
   margin:0;
   padding:0;
}
h1{
  font-size: 18px;
  font-weight: strong;
}
p{
  font-size: 12px;
}
.main{
    width:100%;
    height:auto;
    position: relative;
}
.image {
    background-image:url('https://i.postimg.cc/FRxNp6yG/hr-ax.png');
    background-size:100% 100%;
    background-attachment:fixed;
    transition: 1000ms;
    width: 200px;
    height: 200px;
    position: fixed;
}
#one, #two, #three, #four {
    min-height: 150px;
}

JS: 

$(window).on("scroll touchmove", function() {
            if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top) {
                $('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
            };
            if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top) {
                $('.image').css('background-image', 'url(https://i.postimg.cc/wvz9hzm7/hr-bx.png)')
            };
            if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top) {
                $('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
            };
            if ($(document).scrollTop() >= $("#four").position().top) {
                $('.image').css('background-image', 'url(https://i.postimg.cc/wvz9hzm7/hr-bx.png)')
            };
        });

Ответы [ 2 ]

0 голосов
/ 29 сентября 2019

Выделите текст с помощью jQuery и исправьте высоту относительно него и используйте его для запуска события, например: 

if($(document).scrollTop() >= $("#one .content h1").position().top - 50){
   $('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
}
0 голосов
/ 29 сентября 2019

на свитке, вы можете получить положение всех элементов.И посчитайте, видно это или нет.В зависимости от случая переключателя вы можете изменить изображение.

Пример: 

window.addEventListener('scroll', function() {
    var element = document.querySelector('#main-container');
    var position = element.getBoundingClientRect();

    // checking whether fully visible
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
        console.log('Element is fully visible in screen');
    }

    // checking for partial visibility
    if(position.top < window.innerHeight && position.bottom >= 0) {
        console.log('Element is partially visible in screen');
    }
});

Подробнее:

https://usefulangle.com/post/113/javascript-detecting-element-visible-during-scroll

...