How to add a different scroll start point for each page on menu?

[rystaman]

Hi there

I have a menu that when I scroll down the page it transforms and changes colour and position etc. Here is the javascript code I used to achieve this

jQuery(document).ready(function($) {
  $(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
    navbar = $('.x-navbar');

if (scrollPos > 800) {
  navbar.addClass('alt-color');
} else {
  navbar.removeClass('alt-color');
}
  });
});

The scroll position (800) on the home page is great, but on other pages it needs to be about 350-400. Is there a way of altering the code so that the scroll position can be changed on selected pages?

EDIT: Forgot to add my URL. The home page is - www.rjdesigns.website and an example of the selected page I want it changing on is www.http://rjdesigns.website/?page_id=176

Thanks

[christopher]

Hi there,

This is considered as a customization request and it is outside of our support scope. We will not be able to implement the feature for you but we can give you directions to do that.

Kindly use the Google Chrome Developer Toolbar:

There you will find that for each page there is a class added which gives information about that specific page. For the homepage, it is the home class. So you can use that in your code. Something like this:

jQuery(document).ready(function($) {
	$(window).scroll(function() {
		var scrollPos = $(window).scrollTop(),
		navbar = $('.x-navbar');

		if (jQuery('body').hasClass('home')) {
			if (scrollPos > 800) {
				navbar.addClass('alt-color');
			} else {
				navbar.removeClass('alt-color');
			}
		} else {
			if (scrollPos > 350) {
				navbar.addClass('alt-color');
			} else {
				navbar.removeClass('alt-color');
			}
		}
	});
});

Thank you.

[rystaman]

Thanks for that Chris!

[christopher]

You’re welcome