Javascript代码搞乱响应？

Question

这个javascript代码破坏了我网站的响应能力。有什么我能做的吗？

如果没有这个代码我的网站是完全代理的（我正在使用bootstrap），但这会使部分/内容重叠。

$(function() {
var windowHeight = $(window).height();
$('section').height(windowHeight);


/* checking sections position and activate corresponding navigation item */
var checkActive = function() {
    var screenCenter = $(window).scrollTop() + $(window).height() /2;

    $('section').each(function() {
        sectionTop = $(this).offset().top;
        selectedSection = $('nav a').index($('a[href="#'+$(this).attr('id')+'"]'));
        console.log(selectedSection);
        if( sectionTop < screenCenter  && sectionTop + $(this).height() >= screenCenter) {
            $('nav li').eq(selectedSection).addClass('active');
        } else {

            $('nav li').eq(selectedSection).removeClass('active');
        }
    });
}

checkActive();

/* Click handling of navigation links */
$('nav a').click(function(e) {
    e.preventDefault();
    var dest = $(this.hash);
    $('body').animate({scrollTop: $(dest).offset().top});

});

$(window).scroll(function() {
    checkActive();
})
});

它与以下一起使用：

<nav class="vertical-fixed-nav">
<ul>
    <li class="about"><a href="#about"><span>Home</span></a></li>
    <li class="portfolio"><a href="#portfolio"><span>About</span></a></li>
    <li class="services"><a href="#services"><span>Work</span></a></li>
    <li class="contact"><a href="#contact"><span>Skills</span></a></li>
    <li class="contact"><a href="#contact1"><span>Music</span></a></li>
    <li class="contact"><a href="#contact2"><span>Contact</span></a></li>
</ul>