Sticky Subnav on Scroll

Beaver Builder
1

Here’s the page I’m having trouble with:
https://douglascuffman-portfolio.com/case-study-template/?fl_builder&fl_builder_ui

I’m working on a template for my UX portfolio, for case studies. I created a subnav that I want to stay visible even after the user scrolls beyond the “hero” div. (the div that contains the hero image + case study name). But I can’t get it to work.

I asked ChatGPT for some help and it gave me this:

JS:

$(window).scroll(function() {
  var heroHeight = $('#hero').outerHeight(); // Get the height of the hero div
  var scrollTop = $(window).scrollTop(); // Get the current scroll position

  if (scrollTop > heroHeight) {
    $('#subnav').addClass('sticky-nav'); // Add 'sticky-nav' class when scrolled past hero
  } else {
    $('#subnav').removeClass('sticky-nav'); // Remove 'sticky-nav' class when scrolled above hero
  }
});

CSS:

#subnav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* Set to the top of the page */
  z-index: 1000; /* Ensure it's above other content */
}

.sticky-nav {
  position: fixed;
  top: 0;
  width: 100%; /* You might need to adjust this based on your layout */
  z-index: 1000;
}

I then opened the row in BeaverBuilder and added the ID, the class and the custom code to the corresponding form fields in the advanced tab.

Doesn’t work.

To test it, I changed the position of “top” to “400” and increased the z-index to 10000. But it still doesn’t work.

What am I doing wrong? And did ChatGPT give me wrong code?

Thanks for your help!