плагин kswedberg jquery для плавной прокрутки - выделение ссылок и удаление выделения при прокрутке? - PullRequest
0 голосов
/ 08 февраля 2011

Я использую плагин плавной прокрутки jquery от Karl Swedberg для ссылок на те же страницы: https://github.com/kswedberg/jquery-smooth-scroll

Ссылки имеют фиксированное положение, поэтому они всегда видны. Я хочу, чтобы ссылки были подсвечены после того, как вы нажали на них, но чтобы подсветка была удалена при прокрутке страницы (поскольку вы больше не можете находиться в разделе, которому соответствует ссылка).

Это просто, чтобы ссылки меняли цвет при клике. Тем не менее, удаление цвета при прокрутке сложнее, поскольку сам плагин прокручивает. Я пробовал с этим кодом:

$(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).scroll(function () { 
            $("#scrollcontrolls a").css("color", "black");
        });

    }
});
});

$(document).ready(function() {
$('#scrollcontrolls a').click(function() {
    $(this).css('color','red');
});
});

Проблема в том, что после инициализации функции прокрутки окна она запускается всякий раз, когда плагин плавной прокрутки прокручивает страницу. Это означает, что после того, как вы нажали одну ссылку, она будет всегда переопределять цвет, примененный к ссылке при щелчке, поэтому нажатие других ссылок не меняет их цвет.

Спасибо

РЕДАКТИРОВАТЬ - Я сделал версию, которая работает с кодом ниже:

 $(window).bind('scroll', function () { 
$("#scrollcontrolls a").css("color", "black");
 });

 $(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).unbind();
        $(this).css('color','red');
        $(window).bind('scroll', function () { 
            $("#scrollcontrolls a").css("color", "black");
        });
    }
});
 });

Однако иногда нажатие на ссылку не меняет ее цвет, но повторное нажатие на нее приводит к изменению цвета. Я думаю, что различные функции, запускаемые после Scroll, не всегда запускаются последовательно. Если это проблема, как я могу заставить их сделать это?

Спасибо

1 Ответ

0 голосов
/ 11 июля 2011

Это старый вопрос, но подумал, что было бы полезно упомянуть jQuery Waypoints , который делает именно то, что вам нужно (и, очевидно, на основе jQuery). Очень полезный плагин, вы можете найти его здесь .

...