Streaming live at 10am (PST)

Check Scroll Position and do something if element is visible / invisible

See below piece of script which needs to be put into the footer code of the site settings / page.

In this example, the script checks if the element sticky-nav-triggeris visible in the viewport. If it’s visible, it does nothing - if it’s not visible, it hides an element nav-flag and resizes another element nav-logo. I set a delay (setTimeout) of 250ms and another of 1250ms as it can sometimes take a moment for the page to load and for the script to work properly.

This can be useful to implement on your site as sometimes if a page is reloaded after being scrolled - the scroll triggers are not activated and for example, sticky navs might not be triggered or elements resized, etc.

<!-- LOAD VISIBLE SCRIPT -->
<script src="https://uploads-ssl.webflow.com/56e064c3ee34a748192dac0d/5da07413675e83ca0babf9e5_jquery.visible.txt"></script>

<script>
      // CHECK SCROLL 
      	function checkScroll(){
        	return function(){
          		if ($('.sticky-nav-trigger').visible(true)){
                    // DO NOTHING
          		}
          		else {
                    // SHRINK LOGO AND HIDE FLAG
                    $(".nav-flag").css("opacity", "0");
                    $(".nav-logo").css("width", "50px");
            	}
            }
        }
        setTimeout(checkScroll(), 100); 
        setTimeout(checkScroll(), 1250);  
</script>
3 Likes