具有平滑滚动的Jquery航点

时间:2013-05-20 09:44:22

标签: javascript jquery html css jquery-waypoints

我在这里遇到了一些JQuery路标问题。我在我的单页网站上使用它进行自动滚动导航:

signaturestories.eu

使用滚轮时效果很好。每当某个元素到达屏幕顶部时,我需要它来更改导航项的颜色。问题是当你按下注册 - >关于 - >注册,然后是第三次改变颜色。

的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'});

1 个答案:

答案 0 :(得分:2)

在将jquery添加到page:

之前,您正在调用此位
$(document).ready(function(){
    //jQuery code goes here and will be executed as soon as the page has finished loading
});    

这会抛出$ is not a function错误并停止执行代码。