Jquery change css on scroll position

Question

I am trying to change a css style based on where on the page the viewer is. I have read through every similar thread on google and here and this code seems to be what I want, but it does not work. Any help would be greatly appreciated. Thanks.

Script I was modifying: http://jsfiddle.net/BKnzr/151/

and my testing page (non working): http://newmedia.academyart.edu/~02225904/portfolio/test.html

and the jquery that I am trying to use:

// cache the elements
var $container = $('#container');
var $nav = $('#a.nav');
var $home = $('#home');
var $about = $('#about');
var $work = $('#work');
var $contact = $('#contact');

// get the view area of #container
var top=$(window).scrollTop();
var bottom = top + $container.height();

// run code when #container is scrolled
$container.scroll(function() {
if ($home.offset().top < bottom) {
    $nav.css({"color":"green","font-size":"20px"});
} else if ($about.offset().top < bottom) {
    $nav.css({"color":"green","font-size":"20px"});
} else if ($work.offset().top < bottom) {
    $nav.css({"color":"green","font-size":"20px"});
} else {
    $nav.css({"color":"green","font-size":"20px"});
}
});

No, this other plugin I have is adding a class to the li tag which I thought might work for what I want, but it didn't. I want the anchor tags to change color. — user1218670
– user1218670, Commented Feb 19, 2012 at 3:17
dont use $ for your variables. makes it confusing if it's a jQuery object or a mere variable. — Joseph
– Joseph, Commented Feb 19, 2012 at 4:04
have you checked the console? bcoz i see an error in the console. — Joseph
– Joseph, Commented Feb 19, 2012 at 4:32
Yeah, I responded to your other comment. It says Uncaught TypeError: Cannot read property 'top' of null (anonymous function). — user1218670
– user1218670, Commented Feb 19, 2012 at 4:52

user1218670 · Accepted Answer · 2012-02-19 19:05:12Z

I don't know if this is semantically the best solution, but this worked for my issue.

$(document).ready(function(){

var container = $('#container');
var nav = $('a.nav');
var home = $('#home');
var about = $('#about');
var work = $('#work');
var contact = $('#contact');

$(window).scroll(function(){
  if ($(window).scrollTop() <= $('#about').offset().top - 360)
  {
$('a.nav-home').css({
  'color': '#2dc9b2',
});
$('a.nav-about').css({
  'color': '#fff',
});
$('a.nav-work').css({
  'color': '#fff',
});
$('a.nav-contact').css({
  'color': '#fff',
});
$("a.nav").removeClass("about-hover");
$("a.nav").addClass("home-hover");
$("a.nav").removeClass("work-hover");
$("a.nav").removeClass("contact-hover");
  }

  else if ($(window).scrollTop() <= $('#about').offset().top * 2 - 360)  {
$('a.nav-home').css({
  'color': '#fff',
});
$('a.nav-about').css({
  'color': '#e7ad4a',
});
$('a.nav-work').css({
  'color': '#fff',
});
$('a.nav-contact').css({
  'color': '#fff',
});
$("a.nav").addClass("about-hover");
$("a.nav").removeClass("home-hover");
$("a.nav").removeClass("work-hover");
$("a.nav").removeClass("contact-hover");
  }

  else if ($(window).scrollTop() <= $('#about').offset().top * 2.9999 - 360) {
$('a.nav-home').css({
  'color': '#fff',
});
$('a.nav-about').css({
  'color': '#fff',
});
$('a.nav-work').css({
  'color': '#a22330',
});
$('a.nav-contact').css({
  'color': '#fff',
});
$("a.nav").removeClass("about-hover");
$("a.nav").removeClass("home-hover");
$("a.nav").addClass("work-hover");
$("a.nav").removeClass("contact-hover");
  }

  else  {

$('a.nav-home').css({
  'color': '#fff',
});
$('a.nav-about').css({
  'color': '#fff',
});
$('a.nav-work').css({
  'color': '#fff',
});
$('a.nav-contact').css({
  'color': '#374ad3',
});
$("a.nav").removeClass("about-hover");
$("a.nav").removeClass("home-hover");
$("a.nav").removeClass("work-hover");
$("a.nav").addClass("contact-hover");
  }
});
});

Joseph · Accepted Answer · 2012-02-19 04:05:28Z

0

remove # from var $nav = $('#a.nav'); - because a is a tag and not an id

or use this instead so that only links in the navigation get colorized:

$nav = $('#textlinks-container a.nav')

answered Feb 19, 2012 at 4:05

Joseph

120k31 gold badges186 silver badges238 bronze badges

5 Comments

user1218670 Over a year ago

Err yea, minor mistake, but that is not what is breaking the script as far as I know. It seems like the function is not even firing. I've been referencing many other tutorials and with the little knowledge I have of jquery, that it should be changing the link colors..

Joseph Over a year ago

these "minor mistakes" in jQuery fail silently. have you tried changing them?

user1218670 Over a year ago

Yes I did change it, still nothing. In the browser console it says Uncaught TypeError: Cannot read property 'top' of null (anonymous function).

Joseph Over a year ago

it's natural everything doesn't work because the script is stuck there. wrap everything in $(document).ready(function(){EVERYTHING_IN_HERE});

user1218670 Over a year ago

Hm, that solved the console error, but I cannot get it work correctly. I'm not sure if it's a problem with the top and bottom variables, or if it's in the function..

brains911 · Accepted Answer · 2012-02-19 06:41:06Z

0

You should be able to successfully change the color of the anchor tag text just using the plugin that adds the 'current' class to the li tag.

If that is still your goal, the problem is in the css. On line 81 of your stylesheet, li.current {color:red} will not override the previously declared a.nav {color:#fff;}. You need to use a more specific selector: li.current a {color:red;}

Hope this helps.

answered Feb 19, 2012 at 6:41

brains911

1,3107 silver badges5 bronze badges

1 Comment

user1218670 Over a year ago

Thanks for the response, I actually ended up doing something similar to this

Collectives™ on Stack Overflow

Jquery change css on scroll position

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related