javascript - 当文本变得可见时，在滚动期间更改图像

Question

我有一个脚本，当文本到达屏幕顶部时，它会更改图像。我想要相反的。我希望当 text 从底部一定高度(例如 50px)可见时图像发生变化。我该怎么办？

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

Answer 1

在滚动条上，可以获取所有元素的位置。并计算它是否可见。根据开关盒，您可以更改图像。

示例:

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