Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 4, 2018 at 8:37 pm #1040923
    sparkzilla

    Hi, I would like to hide the logo in the header on some pages only until the user has scrolled down. I created a code block on the page and tried this code, but while it hides the logo to start with, it doesn’t reveal itself on scroll. Any help using this code or another method or plugin is most appreciated!

    <script type="text/javascript">  

var $win = $(window);
function checkScroll() {
    if ($win.scrollTop() > 500) {
       $win.off('scroll', checkScroll);
       $('.logo').fadeIn(2000);
   }
}
$win.scroll(checkScroll);
</script>

<style>
 .logo {
    display: none;
    position: fixed;
  z-index: 9999;
}
</style>

    PS: you can see the page I am working on at http://www.kolokube.co.uk/

    December 5, 2018 at 2:03 am #1041038
    Jordan Shannon

    Hey sparkzilla,

    The link you provided is not working for me. Can you double check it?

    Best regards,
    Jordan Shannon

    December 5, 2018 at 2:11 am #1041040
    sparkzilla

    Link should work now: http://www.kolokube.co.uk/

    December 5, 2018 at 2:17 am #1041042
    Jordan Shannon

    Hi,

    You may be better suited using the transparent header then we can simply adjust the css to the following:

    .av_header_transparency .logo {
    opacity: 0;
}

    Best regards,
    Jordan Shannon

    December 5, 2018 at 2:23 am #1041045
    sparkzilla

    It’s an interesting solution, thank you. I have changed the page so you can see it in action. I don’t think the client will accept it though. But, if they did, would it be possible to make the header appear when it gets to the bottom of the slider?

    December 5, 2018 at 5:26 pm #1041302
    sparkzilla

    The client didn’t like it, so I’m back to trying to get the original code to work. Any ideas?

    December 5, 2018 at 5:53 pm #1041315
    Jordan Shannon

    Hi,

    Apologies, my suggestion of using the transparent header was to still use css to give it a background color and hide the logo. It doesn’t have to be transparent if that was the issue.

    Best regards,
    Jordan Shannon

    December 5, 2018 at 6:10 pm #1041323
    sparkzilla

    Actually, I got the code working by changing all the $ to jQuery.

    <script type="text/javascript">  

(function() {
    var jQuerywin = jQuery(window);
    var jQuerybot = jQuery('.logo');
    var shown = false;
    
    function checkScroll() {
        if (jQuerywin.scrollTop() > 445) {
            if (!shown) {
                shown = true;
                jQuerybot.stop().fadeIn(2000);
            }
        } else {
            if (shown) {
                shown = false;
                jQuerybot.stop().fadeOut(2000);
            }
        }
    }
    
    jQuerywin.scroll(checkScroll);
})();
</script>

<style>
 .logo {
    display: none;
    position: fixed;
  z-index: 9999;
}
</style>

    You can see it working at http://www.kolokube.co.uk/

    December 5, 2018 at 6:36 pm #1041329
    Jordan Shannon

    Hi,

    GreaT! Did you need additional help, or shall we close this topic?

    Best regards,
    Jordan Shannon

    December 5, 2018 at 6:36 pm #1041330
    sparkzilla

    Topic can be closed. Thank you for your help.

    December 5, 2018 at 6:43 pm #1041332
    Jordan Shannon

    Hi,

    No problem at all. If you need anything else, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Reveal logo after scroll’ is closed to new replies.