Как сделать так, чтобы скрытый текст появлялся при прокрутке вниз до определенной части страницы?

#javascript #css #scroll #css-animations #display

Вопрос:

Я добавил несколько анимаций на свой веб-сайт и хочу, чтобы они появлялись, когда пользователь прокручивает страницу вниз до средней части разделов. Я нашел способ сделать это с помощью какого-то старого кода из кнопки «вверху страницы». Он работает довольно хорошо, но на более узких экранах он настраивает/встряхивает страницу, и это выглядит странно, плюс я считаю, что если я добавлю больше на страницу, мне потребуется отрегулировать количество пикселей. Как я уже сказал, проблема возникает, когда экран реагирует. Есть ли лучший способ сделать все это?
https://codepen.io/drxl/pen/JjNVbgP Вот JS, который у меня есть:

 $(document).ready(function () {
    var downscroll = 450;
    var timeLength = 500;
    $(window).scroll(function () {
        if ($(this).scrollTop() > downscroll) {
            $('.about__title, .portrait, .bottom-text-animation').fadeIn(timeLength);
        } else {
            $('.about__title, .portrait, .bottom-text-animation').fadeOut(timeLength);
        }

    });
});
 

Комментарии:

1. Ссылка на кодовую ссылку не работает.

2. Забыл сохранить, попробуй сейчас

3. по-прежнему ваш код ничего не отображает внутри фрейма. Также вы не добавили jQuery cdn.

4. Попробуйте еще раз, если это не сработает, я могу просто предоставить вам весь сайт, он не такой большой, всего одна страница (на самом деле это мое портфолио).

5. Ваш код все еще требовал исправления большого количества ошибок. Я просто ничего не мог из этого разобрать.