Page Specific Javascript for Navbar

  • Resolved Daniel Johnson

    (@daniel-johnson)


    9 years, 9 months ago

    Hello everyone,

    This is my first time using the forum, so lease forgive any mistakes I make but I am after a little bit of help with some JavaScript. I am using it for the very time and found a nice bit of code that allows me to set an anchor point for when my menu bar appears upon scrolling. A very similar effect to what you see here https://www.laurenlibaw.com

    What I need help with is that I need the affect to only take place on the home page as some of the other pages are none scrolling pages.

    I am using X-Theme which allows you to add CSS and Java Script in the WordPress Customizer.

    This is the code I am using for the effect.

    CSS:

    body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 0px;
margin-bottom: 0px
}

    Javascript:

    (function ($) {
  $(document).ready(function(){

    // hide .x-navbar first
    $(".x-navbar").hide();

    // fade in .x-navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 450) {
                $('.x-navbar').fadeIn();
            } else {
                $('.x-navbar').fadeOut();
            }
        });
    });

});
  }(jQuery));

    I did quite a bit of research and what I found so far is this:

    if( is_page('x')) { ?>
// YOUR SCRIPT STUFF
<?php }

    Is this what I would need? I have tried experimenting with this bit of code but can not get it to work.

    Any help would be most appreciated.

    The website in question is https://www.nicodevilliers.com

    Please note I have removed the function for the moment as it is a live site.

    Thank you,

    Daniel

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you checking your browser’s console for any errors? That’s a big helper when developing JavaScript… https://developer.chrome.com/devtools/docs/console

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at the source code of your Home page.
    This is generated:

    <body class="home page page-id-406 page-template page-template-page_builder-php pe-header-transparent pe-page-fullwidth pe-sticky-footer pe-controller-widgets pe-header-scrolled">

    Can you see what you need to do in jQuery now?

    (function ($) {
  $(document).ready(function(){

    if ($('body').hasClass('home')) {

    // hide .x-navbar first
    $(".x-navbar").hide();

    // fade in .x-navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 450) {
                $('.x-navbar').fadeIn();
            } else {
                $('.x-navbar').fadeOut();
            }
        });
    });
    }

});
  }(jQuery));

    Thread Starter Daniel Johnson

    (@daniel-johnson)

    Hi Andrew,

    This is amazing thank you. It worked perfectly.

    Seeing where the code goes and how it is built is really helpful and the tip for using the console is great.

    Thank you again.

    Dan

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Page Specific Javascript for Navbar’ is closed to new replies.