Various snippets useful for Webflow development

webflow-helpers.js

<style type="text/css">
	.no-scroll {
    overflow: hidden;
    height: 100%;
	}
</style>

<script type="text/javascript">
  var Webflow = Webflow || [];

	Webflow.push(function () {

    // Add class to fixed/sticky header once it reaches first content

    let contentElement = $("#first_content");
  	let headerElement = $(".navbar_component");
    
    console.log(`${contentElement.outerHeight() + headerElement.outerHeight()}px`);
  
    let observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        headerElement.removeClass("with-background");
      } else {
        headerElement.addClass("with-background");
      }
    }, {
	    rootMargin: `-${contentElement.outerHeight() + headerElement.outerHeight()}px`,
    });

		observer.observe(contentElement[0]);

    // Prevent page scroll while mobile nav open

    $('.w-nav-button').on('click', function() {
      $('body').toggleClass('no-scroll');
    });
});
</script>