Title: Page Specific Javascript for Navbar Last modified: August 22, 2016 --- # Page Specific Javascript for Navbar * Resolved [Daniel Johnson](https://wordpress.org/support/users/daniel-johnson/) * (@daniel-johnson) * [11 years, 4 months ago](https://wordpress.org/support/topic/page-specific-javascript-for-navbar-1/) * 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 [http://www.laurenlibaw.com](http://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 ``` * 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](https://wordpress.org/support/users/daniel-johnson/) * (@daniel-johnson) * [11 years, 4 months ago](https://wordpress.org/support/topic/page-specific-javascript-for-navbar-1/#post-5758076) * 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. ## Tags * [javascript](https://wordpress.org/support/topic-tag/javascript/) * [nav bar](https://wordpress.org/support/topic-tag/nav-bar/) * [page-specific](https://wordpress.org/support/topic-tag/page-specific/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 3 replies * 2 participants * Last reply from: [Daniel Johnson](https://wordpress.org/support/users/daniel-johnson/) * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/page-specific-javascript-for-navbar-1/#post-5758076) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics