CODEWITHSUNDEEP
jqueryhtmlcss
user1218670
user1218670

Reputation: 31

Jquery change css on scroll position

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"});
}
});

Upvotes: 0

Views: 4802

Answers (3)

user1218670
user1218670

Reputation: 31

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");
  }
});
});

Upvotes: 2

brains911
brains911

Reputation: 1310

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.

Upvotes: 0

Joseph
Joseph

Reputation: 119877

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')

Upvotes: 0

Related Questions