Assegnare una classe ad un tag HTML con jQuery, Bootstrap oppure Javascript quando l'elemento viene visualizzato

[U235]

Ciao,
usa IntersectionObserver al posto dello scroll:

var observer = new IntersectionObserver(onIntersection, {
                root: null,
                threshold: .75
            })
            function onIntersection(entries, opts) {
                entries.forEach(entry => {
                    if (entry.isIntersecting === true) {
                        entry.target.children[0].classList.add('in');
                    }
                    else {
                        entry.target.children[0].classList.remove('in');
                    }
                });
            }
            var arr = document.querySelectorAll('.box');
            arr.forEach(el => {
                observer.observe(el);
            });

css:

       .box {
            visibility: hidden;
            height:100px;
        }
        .in {
            visibility: visible;
            position: absolute;
            top:inherit;
            -webkit-animation-name: run;
            -webkit-animation-duration: 5s;
        }
        @-webkit-keyframes run {
            0% {
                left: 100%;
            }
            100% {
                left: 0;
            }
        }

html:

<div class="box">
            <img src="https://www.html.it/app/themes/htmlit/assets/logo/html_logo.svg" width=100 height=100>
        </div>

Funziona anche con il ridimensionamento della finestra.
Qui un esempio.

EDIT:
Ho letto bene dopo... questo funziona solo con browser moderni