Динамическое изменение стиля при прокрутке страницы

По мере прокрутки страницы я хочу изменить интервал букв в H1.

Я думал, что мой codepen будет работать, но, очевидно, нет, я также не уверен, возможно ли и как сделать стиль другим для каждого H1.

В идеале мне бы хотелось, чтобы чем ближе к верху страницы, тем меньше интервалов у каждого H1:

<h1 style = "letter-spacing:3px">this is the Title</h1>
<h1 style = "letter-spacing:7px">this is the Title</h1>
<h1 style = "letter-spacing:11px">this is the Title</h1>
<h1 style = "letter-spacing:13px">this is the Title</h1>

https://codepen.io/steven-david-reid/pen/vYXWNYK

var $output = $("h1");

$(window).on('scroll', function() {
  var scrollTop = $(window).scrollTop(),
    elementOffset = $("h1").offset().top,
    distance = (elementOffset - scrollTop);
  $('$output').css({
    'letter-spacing': distance
  })
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>

Измените на $output.css({ вместо $('$output').css({

— 24.12.2020 21:50

Голосование за закрытие как невоспроизводимое или вызвано опечаткой. Хотя подобные вопросы могут быть здесь по теме, этот был решен таким образом, что вряд ли поможет будущим читателям.

— 24.12.2020 21:50

jquery css inline-styles

24.12.2020 21:45

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

292

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не уверен, что вы имели в виду, но если вы имеете в виду, что вы хотите, чтобы размер h1 менялся при прокрутке страницы сверху, вы можете сделать это...

$(function () {
  $(document).scroll(function () {
    var $nav = $("#yourH1");
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
  });
});

и добавьте прокручиваемый класс в css пример:

.scrolled {
  font-size: 3rem;
}

еще раз очень извиняюсь если не правильно вас понял я тут новенький

24.12.2020 21:52

Ответ принят как подходящий

Ваш CodePen работает, просто небольшая ошибка в вашем JS. Вместо $('$output').css({'letter-spacing': distance}) должно быть $output.css({'letter-spacing': distance})

Обновлено: Цель состоит в том, чтобы иметь большие интервалы между буквами, которые сходятся к нулю по мере того, как текст приближается к верхней части страницы при прокрутке. Обратите внимание на Math.max($(this).offset().top - scrollTop, 0), который используется для того, чтобы расстояние между буквами не стало отрицательным. Затем оно делится на 20; это произвольное число, оно просто уменьшает расстояние между буквами, так как расстояние очень велико.

var $output = $("h1");

function changeLetterSpacing() {
    var scrollTop     = $(window).scrollTop(),
        elementOffset = $("h1").offset().top;
    $output.css('letter-spacing', function(d) { 
        return Math.max($(this).offset().top - scrollTop, 0)/20 + "px"; 
    })
}

$(window).on('scroll', function () {
    changeLetterSpacing();
});
changeLetterSpacing();

Спасибо, есть ли способ внести изменения для каждого отдельного H1, а не применять первый ко всем?

— 24.12.2020 22:03

@Tomate, конечно, можете ли вы обновить свой вопрос примером того, как H1 должны выглядеть при одной прокрутке?

— 24.12.2020 22:07

В соответствии с просьбой, надеюсь, это имеет смысл, я думаю, что мне нужно сделать каждый h1 экземпляром $ this (извините, если мой язык неверен - я давно не писал подобные сценарии)

— 24.12.2020 22:23

24.12.2020 21:55