Есть ли способ, которым я могу изменить фон панели навигации в html5 при увеличении текста или при прокрутке текста вверх?

Question

Я бы хотел, чтобы навигационная панель оставалась неизменной c и меняла фон в виде текста в потоке вверх или прокручивалась вверх. Вот код.

Вот код html и css

введите описание изображения здесь

Answer 1

/ * Добавить класс пребывания. Его следует добавить к панели навигации с помощью JS, когда он достигнет положения прокрутки * /

.staythere {
position: fixed;
top: 0;
width: 100%;
}

Javascript:

window.onscroll = function() 
{
     myFunction() /* Function to add staythere Class */
     /* Code to Change Background Color. Use any condition if necessary */
     document.getElementsByTagName("BODY")[0].style.backgroundColor = 'red'; // Here red is an Example

 };

/ * Получить панель навигации * / var navbar = document.getElementById("navbar");

/ * Получить позицию смещения навигационной панели * / var fixedPos = navbar.offsetTop;

// Добавить класс "staythere" к навигационной панели, когда вы достигнете положения прокрутки. Удалите «остаться», когда вы покинете позицию прокрутки

function myFunction() {
if (window.pageYOffset >= fixedPos) {
navbar.addClass("staythere")
} else {
navbar.removeClass("staythere");
}
}