使用cool-kitten-master框架滚动

时间:2014-05-04 14:52:41

标签: javascript jquery html

我将github.com/jalxob/cool-kitten安装到我的网站http://itee.lt/但滚动脚本有问题:https://github.com/jalxob/cool-kitten/blob/master/js/scripts.js当我使用顶部导航栏并按下链接时,按下的文字链接不会改变颜色。如何解决?

jQuery(document).ready(function ($) {


$(window).stellar();

var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');


slide.waypoint(function (event, direction) {

    dataslide = $(this).attr('data-slide');

    if (direction === 'down') {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }
    else {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }

});

mywindow.scroll(function () {
    if (mywindow.scrollTop() == 0) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }
});

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, 'easeInOutQuint');
}



links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

button.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);

});


});

1 个答案:

答案 0 :(得分:-1)

$(window).stellar();

var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');


slide.waypoint(function (event, direction) {

    dataslide = $(this).attr('data-slide');

    if (direction === 'down') {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }
    else {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }

});

mywindow.scroll(function () {
    if (mywindow.scrollTop() <= 1) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }
});

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top + 1
    }, 2000, 'easeInOutQuint');
}



links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

button.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);

});


});

javascript jquery html