размытие других компонентов в javascript и css не работает после прокрутки

Ранее я спрашивал на StackOverflow о размытии некоторых компонентов после плавной прокрутки к ним благодаря Javascript. Я получил ответ, увидел, как это работает в jsfiddle, и остался доволен, пока... не попробовал сам. Я не уверен, что я делаю неправильно, но в моем примере это решение не работает большую часть времени. Я бы сказал совершенно рандомно, но правда когда я нажимаю какое-то поле в меню и захожу туда - работает, все остальное размыто. Поэтому я прокручиваю вверх, чтобы снова увидеть меню, снова щелкаю по нему, и тогда ничего не размывается. В основном это просто не работает.

В настоящее время я заметил, что это работает для первой и последней позиции в меню, но не для средних. Может быть, какую-то переменную нужно очистить?

var isBlurred = false;

$('#borders a').on('click', function(e) { 
    var el = $( e.target.getAttribute('href') );
    var elOffset = el.offset().top;
    var elHeight = el.height();
    var windowHeight = $(window).height();
    var offset;

    if (elHeight < windowHeight) {
        offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
    }
    else {
        offset = elOffset;
    }

    $.smoothScroll({
        speed: 700,
        offset: offset,

        // 'blur' elements after scrolling
        afterScroll: function() {
            // blur elements
            $('.item').not(el).addClass('item--blurred');

            // remember that it's blurred
            isBlurred = true;
        }
    });

    return false;
});

$(window).on('scroll', function() {
    // don't do anything if we're not in a blurred state
    if(!isBlurred) return;

    // reset everything to a non-blurry state
    $('.item').removeClass('item--blurred');
    isBlurred = false;
});

Может ли кто-нибудь помочь мне и понять, почему в предыдущем случае отсюда это работает, а в моем случае (вот jsfiddle) это не так?