JavaScript / jQuery code not working in HTMLSnippet -> Element hides/shows when user scrolls
2
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="<http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js>"></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
asked
Douwe Meuldijk
1 answers
0
To make the "Code1" work add two HTML Snippet, one for HTML an the another one for Javascript, without these "<script> </script>"
answered
Marcell Birkás