JavaScript / jQuery code not working in HTMLSnippet -> Element hides/shows when user scrolls

Hi community, I´ve been trying to implement the following through Javascript (jQuery). When the user scrolls down the page all the way from the top, I immediately want an element to appear. For example, a searchbar or header. When the user scrolls up again to the top, this element should be hidden again. However,  I struggle to find out why my code snippet does not work. Intuitevely I feel it’s because of wrongly selecting the classes I need to target. But I gladly hear from the community what they think is the issue.   Firstly, I implemented this jQuery action via a simple HTML structure to check if the action did what it intended to be doing. And yes, this works.   Code 1 //.. <script src="<>"></script> </head> <body> <div class="header">Header</div> <div id="content"> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> <p>Line</p> </div> <script> $(document).ready(function() { var headerTop = $('.header').offset().top; $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if (scrollTop > headerTop) { if (($(".header").is(":visible") === false)) { $('.header').fadeIn('slow'); } } else { if ($(".header").is(":visible")) { $('.header').fadeOut(); } } }); }); </script> //..   Image 1   Image 2 Now I want to implement this code into a HTML/JS snippet in the modeler. Of course, I need to change the selector-value for selecting the specific class. See the image below for these corresponding classes. In my Mx-case, I assume now that this means that I change my code to this:   Code 2 //.. $(document).ready(function() { var headerTop = $('.mx-name-container1.header.background-primary').offset().top; $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if (scrollTop > headerTop) { if (($('.mx-name-container1.header.background-primary').is(":visible") === false)) { $('.mx-name-container1.header.background-primary').fadeIn('slow'); } } else { if ($('.mx-name-container1.header.background-primary').is(":visible")) { $('.mx-name-container1.header.background-primary').fadeOut(); } } }); }); //..   Image 3   Finally, I implement this code in a HTMLSnippet with the following configuration:   Image 4   Regards, Douwe
0 answers