Disable Logo in Header Menu until you scroll

[daxmann]

Hey There I am currently working on my website: http://www.badkidsproduction.com/

And I would love to have the logo in the menu bar (top left) to disappear until you scroll below the fullscreen video slider, because I dont want to see it twice.

Is there a way to do this?

Thank you! :)

Mischa

[felix_rabe]

if you have some css skills, you can work with a script like this:

<script>
window.laytheme.on("newpageshown",function() {

var logo = jQuery("#mylogo");
jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();
    if (scroll >= window.innerHeight-100) {
        /*logo.removeClass("visible");*/
        logo.addClass("invisible");
    } else {
        logo.removeClass("invisible");
        /*logo.addClass("visible);*/
    }
});

});
</script>

[daxmann]

And If I dont have any css skills? :D

[Richard]

Thank you @fr for the above code! :)

@daxmann Your Logo upon scrolling down the page will be given a class called 'invisible'

You can give this new class some CSS that will in turn affect your Logo - '#mylogo' E.g:

.invisible{
   display:none;
}

https://www.w3schools.com/css/css_display_visibility.asp

.invisible{
    visibility:hidden;
}

https://www.w3schools.com/cssref/pr_class_visibility.asp

.invisible{
    opacity:0;
}

https://www.w3schools.com/cssref/css3_pr_opacity.asp

They have different properties so choose what suits your needs.

Custom Code can be added within > Lay Options > Custom CSS & HTML >

Also:
https://laytheme.com/documentation.html#custom-css-styling

Hope this helps and best wishes
Richard

[daxmann]

Thank you both so much for your support so far! So It works! <3
There is only one problem, I rearranged the code a little bit because the code above was the wrong way (Logo disappeared when scrolling below the fullscreen slider, I wanted it the other way around)

So the code Rn is like this:

<script>	
	window.laytheme.on("newpageshown",function() {

var logo = jQuery(".sitetitle.img");
jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();
    if (scroll >= window.innerHeight-100) {

		        logo.removeClass("invisible");
        /*logo.addClass("visible);*/
    } else {
        /*logo.removeClass("visible");*/
        logo.addClass("invisible");
    }
});
});
</script>

The only thing right now is that the logo is shown when you load the site, by the moment you scroll it disappears and when you scroll below the fullscreen slider it appears. I want the logo to not be shown at the beginning when you load the site, it should only appear for the first time if you scroll below the header area. Can you help me with that?

And second question: Is there a way to only have this behavior on the landing page and not on sub pages? I added the script in the header file, so its global right now - I am using a category page as a landing page.

All the best

Mischa

[felix_rabe]

for your 2nd question try this:

       <script>	
        	window.laytheme.on("newpageshown",function() {

            if (window.location.pathname == "/") {
 
            var logo = jQuery(".sitetitle.img");
            jQuery(window).scroll(function() {
            var scroll = jQuery(window).scrollTop();
            if (scroll >= window.innerHeight-100) {
        
        		        logo.removeClass("invisible");
                /*logo.addClass("visible);*/
            } else {
                /*logo.removeClass("visible");*/
                logo.addClass("invisible");
            }
        });
        }
        });
        </script>

BTW: now that you have the frame, I would recommend you to use google as well to optimize this for your needs :-) There is an answer somewhere for questions like "hide logo/div when page loads" etc.

[daxmann]

This is perfect. Thank you so much!