jQuery script to only function on one page

Question

I know there have been a variety of answers to similar questions, but my JS skills are so poor I cannot really get the answers to work in my specific example. I have the following script on my WordPress site which tells the navigation bar to change color once it hits the #startchange CSS ID when scrolling down the page.

jQuery(document).ready(function( $ ) {      
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
       } else {
          $('#main-header').css('background-color', 'transparent');
       }
   });
});

This works perfectly on the page that I want it implemented on (the landing page) but for the blog posts pages, the background is white and therefore the navbar is invisible. What modification do I need to do to this script to tell it to only function on the landing page, or alternatively what can be done to the script to tell it that when it is a blog post page that a certain CSS class be applied to it?

Just add the script to one page, if its in an external file referenced by every page then you will have to remove the reference and add what you need — Master Yoda
– Master Yoda, Commented Dec 14, 2017 at 11:27
You could put a class on the container of whatever page you want this script to run on, then check for the existence of that class before attaching the scroll event handler. — Rory McCrossan
– Rory McCrossan, Commented Dec 14, 2017 at 11:30

sashaikevich · Accepted Answer · 2017-12-14 12:12:30Z

As suggested, you can just add the script directly to that one page (there's likely a good plugin to do that... for example, Elementor gives you an option to insert javascript block among other things)

Or, just wrap it in an if statement that checks for the page-id-## class you need:

jQuery(document).ready(function( $ ) {    
  // replace the XX with your page id
  if (document.body.classList.contains('page-id-XX')) { /
    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    $(document).scroll(function() { 
       scroll_start = $(this).scrollTop();
       if(scroll_start > offset.top) {
           $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
        } else {
           $('#main-header').css('background-color', 'transparent');
        }
    });
  }
});

Tom · Accepted Answer · 2017-12-14 11:28:03Z

0

You can create an if statement checking the path of the page like this:

if (top.location.pathname === '/x/x/path')
{

}

answered Dec 14, 2017 at 11:28

Tom

1,0172 gold badges15 silver badges36 bronze badges

2 Comments

TimmehNZ Over a year ago

Thanks Tomm, but I need to clarify that my JS skills are less than zero. Where would I place that in the above code?

Tom Over a year ago

@TimmehNZ you just place your jquery in the if statement and add your pathname in the placeholder

Ben Morris · Accepted Answer · 2017-12-14 11:38:21Z

Something like this but not being familiar with Wordpress it would be better just to implement the JS for just the page you require it.

jQuery(document).ready(function( $ ) {    
   var pageName = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
   if(pageName != null && pageName.toLowerCase() == "somepagename.php") {
       var scroll_start = 0;
       var startchange = $('#startchange');
       var offset = startchange.offset();
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
           } else {
              $('#main-header').css('background-color', 'transparent');
           }
       });
   }
});

Collectives™ on Stack Overflow

jQuery script to only function on one page

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related