Header background color change on scroll

[Gatera]

Expected Behavior

.jl-header-bg-active class to be added to .jw-theme-dark .jw-header class on scroll

Actual Behavior

class is not added, hence background color stays transparent

Steps to reproduce

1.add .jl-header-bg-active{background-color:#000} to main.css 2.add following js code to scripts.js $(function() { $(window).on("scroll", function() { if($(window).scrollTop() > 50) { $(".jw-theme-dark .jw-header").addClass("jl-header-bg-active"); } else { //remove the background property so it comes transparent again (defined in your css) $(".jw-theme-dark .jw-header").removeClass("jl-header-bg-active"); } }); });

Environment

• Webserver
• Apache
• JW Showcase v3.9.1 | beta.journal.rw

---

This template is provided as a guide to filing bugs and feature requests. Please replace all text in italics with details describing your issue. When submitting a feature request, "Steps to reproduce" can be substituted with a user story or list of acceptance criteria.

[pajter]

Hi,

You're using jQuery, which is not included in Showcase. For your use case, you would need to use something as follows:

document.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  document.querySelector('.jw-theme-dark .jw-header').classList.toggle('jl-header-bg-active', scrollTop > 50);
});

[Gatera]

Thanks a lot! It's working.