goshaLoonny

Сравнить scrollWidth и clientWidth, если они разные то контейнер переполнен, а дальше советую добавить класс в котором вы и сделаете это "налаживание" : )

<div class="text">Много каких-то букв</div>

.text{
  width: 100px;
  height: 40px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.overflowed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #222);
  pointer-events: none;
}

const el = document.querySelector('.text');

if (el.scrollWidth !== el.clientWidth) {
  el.classList.add('overflowed')
}

p.s. Вижу слово "налаживался" и ловлю микроинфаркт

Для этого есть API видимости страницы
Заголовок страницы меня есть так: document.title = "Новый заголовок"

Изучите Web Audio API и идеи появятся : )
Есть событие timeupdate , оно вызывается каждый раз когда время в атрибуте currentTime обновляется. Значение атрибута currentTime это количество секунд прошедших с начала воспроизведения (число с плавающей точкой).

const sound = document.getElementById('audio-node')

sound.addEventListener('timeupdate', () => {
  console.log(sound.currentTime.toFixed(0))
})

Судя по 12 колоночной сетке полагаю подразумевалось использование Bootstrap. Можно сделать это так

Фулл: https://codepen.io/goshaloonny/full/BaJaWLv

Это очень просто сделать, но полагаю будут проблемы с SEO
Первый способ:
Обработка :target
Ссылкам в меню присваиваются якоря(#), а странички это по сути блоки с display: none, position: absolute и обязательно с НЕ прозрачным фоном т.к. первый экран не скрывается, а далее обрабатывается :target. Вот пример:


Второй способ:
Добавление скрытых(что бы не портить дизайн) <input type="radio"> и обработку :checked с использованием ~. Вот пример:

clip-path: polygon(5% 15%, 100% 0, 100% 100%, 0% 100%);