Headroom.js together with Locomotive Scroll

[JoBlast447]

Hi, I am developing a project in which I use Headroom.js.

Now I have integrated Locomotive Scroll successfully but Headroom.js no longer works.

In Headroom.js there is an option called "scroller" where you enter an element to listen to scroll events on, defaults to "window", I have tried to enter "[data-scroll-container]" or "[data-scroll-section]" which are the containers that allow Locomotive to recreate the smooth scroll effect, but it doesn't work.

Is there anyone who has had a similar experience and can help me?
Thank you in advance for a kind reply!

[WickyNilliams]

It does not take a selector, but rather an actual element:

new Headroom({
  scroller: document.querySelector("[data-scroll-container]")
})

Hope that helps

[JoBlast447]

Hi,
Thank You for your feedback but unfortunately it doesn't work

now for Headroom.js i have this:

(function() {
    var header = new Headroom(document.querySelector("#header"), {
        scroller: document.querySelector("[data-scroll-container]"),
        tolerance: 5,
        offset : 75,
        classes: {
          initial: "animated",
          pinned: "slideDown",
          unpinned: "slideUp",
        },
    });
    header.init();
}());

and for Locomotive Scroll i have this:

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
});

if I remove the Locomotive Scroll part then Headroom.js works again

the HTML code looks like this:

<div data-scroll-container>
    <section data-scroll-section>
        <header id="header">
            .....
        </header>
        .....
    </section>
</div>

I tried to move the header outside the Locomotive containers but nothing works.
if anyone has a solution it is welcome
Thanks