Change div class on scroll

[Donethat]

I want to be able to change the class of a div on page scroll. Once the class changes then any number of things can be achieved.

For the time being I want to stick the menu to the top and modify other aspects of it's styling. I have tried any number of versions of jQuery scripts for doing this and in isolation, i.e. a non Joomla page with nothing else on it these nearly all work fine with most versions of jQuery.

The problems arise as soon as I try and use it on a Joomla template. Currently using a blank from blank.vc

I am a great fan of these blank templates so I'm hoping there is something I am missing in this

This is the current test page

http://lawandorderfoundation.org

The Javascript I am using on this page is

Code: Select all

$(window).scroll(function() {
  if ($(document).scrollTop() > 10) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

[SharkyKZ]

Maybe your site is running jQuery in noconflict mode? In that case changing $ to jQuery in your code or creating a different alias should fix this https://api.jquery.com/jquery.noconflict/.

[Donethat]

Thank you for responding

I discovered that no conflict mode is a problem and I'm not using it.

I'll check out the link.

Cheers

Crispin