/ / Як змінити колір, коли користувач прокручує - javascript, jquery, html, css

Як змінити колір під час прокрутки користувача - javascript, jquery, html, css

У мене є фрагмент коду jQuery, який змінюєелементи пари кольорів, коли користувачі прокручують вниз. Але коли користувач прокручує резервну копію сторінки, я хочу перейти на початковий колір. Це не працює так, як я очікував ...

Оригінальний код, який працює

jQuery(window).scroll(function()
{
var scrollTop = jQuery(this).scrollTop(),
offset = jQuery("#masthead").height() - 55;
if ( scrollTop < offset )
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
else
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
})

Змінений код, який також працює

})(window.jQuery);
jQuery(window).scroll(function()
{
var scrollTop = jQuery(this).scrollTop(),
offset = jQuery("#masthead").height() - 55;
if ( scrollTop < offset )
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
else
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
jQuery(".primary-menu a").css({ color: "white" });
})

Додавання додаткового модифікатора css спочатку, якщо операція вбиває сценарій.

})(window.jQuery);

jQuery(window).scroll(function()
{
var scrollTop = jQuery(this).scrollTop(),
offset = jQuery("#masthead").height() - 55;
if ( scrollTop < offset )
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
jQuery(".primary-menu a").css({ color: "black" });
else
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
jQuery(".primary-menu a").css({ color: "white" });
})

Відповіді:

3 для відповіді № 1

Я бачу, що вам не вистачає дужки у вашому if і else. Звідси лише перший рядок, що слідує за if і else отримує страту. Замість цього додайте дужку так:

 .....
if ( scrollTop < offset ) {
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0)" });
jQuery(".primary-menu a").css({ color: "black" });
}
else {
jQuery(".float-manu").css({ backgroundColor: "rgba(0,0,0,0.7)" });
jQuery(".primary-menu a").css({ color: "white" });
}
....