I am having a little trouble with JQuery waypoints here. Im using it for my auto scroll navigation on my one page site:
It works fine when i use my scroll wheel. I need it to change the color of my nav items whenever a certain element reaches top of the screen. The problem is when you press sign up --> about --> sign up, then is doesnt change the color that third time.
script.js:
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
var currentMenuObject = '';
$('#wrapper').waypoint(function() {
$(currentMenuObject).css('color', '#f2e0bd');
currentMenuObject = '#top';
$(currentMenuObject).css('color', 'black');
}, { offset: '55'});
$('#introarticle').waypoint(function() {
$(currentMenuObject).css('color', '#f2e0bd');
currentMenuObject = '#top';
$(currentMenuObject).css('color', 'black');
}, { offset: '55'});
$('#signsection').waypoint(function() {
$(currentMenuObject).css('color', '#f2e0bd');
currentMenuObject = '#signup';
$(currentMenuObject).css('color', 'black');
}, { offset: '55'});
$('#storyarticle').waypoint(function() {
$(currentMenuObject).css('color', '#f2e0bd');
currentMenuObject = '#about';
$(currentMenuObject).css('color', 'black');
}, { offset: '55'});
You are calling this bit before adding jquery to page:
$(document).ready(function(){
//jQuery code goes here and will be executed as soon as the page has finished loading
});
This throws an $ is not a function
error and stops executing code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.