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

Question

我有这个脚本可以在text 到达屏幕顶部时更改图像。我想要反过来。当text 从底部的某个高度（例如 50 像素）变得可见时，我希望更改图像。我该怎么办？

JS 小提琴：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

Answer 2

使用 jQuery 选择文本并更正相对于该文本的高度并使用它来触发事件，例如：

if($(document).scrollTop() >= $("#one .content h1").position().top - 50){
   $('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
}