blurring other components in javascript and css do

问题:

I previously asked on StackOverflow about blurring some components after smooth scrolling to them thanks to Javascript. I got an answer, saw how it works in jsfiddle and was satisfied, until... I tried it on my own. I'm not sure what am I doing wrong, but in my example that solution doesn't work for most of the time. I would say it's completely random, but the truth is when I click some field on the menu and go there - it works, everything else is blurred. So I scroll to the top to see the menu again, click it again and then nothing gets blurred. Mostly it just doesn't work.

Currently I observed that it works for the first and last position from the menu, but not for middle ones. Maybe some variable has to be cleared?

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

Could someone help me and see why in the previous case from here it works and in my case (here's jsfiddle) it doesn't?