单页滚动网站隐藏菜单上的图像点击

Question

我一直在研究这个代码，以便在单个页面网站的每个部分进入视口时更改图像。它主要是工作，但是，如果单击侧面菜单（点击时的.tvMenu），页面将滚动到相关部分，但是当所有图像显示为各个部分滚动经过视口时。我知道原因是onclick隐藏了图像和滚动隐藏它们。 我可以让它做我想做的唯一方法是通过javscript中的错误。 （对此并不高兴）。顺便说一句，我对此很新。我已经使用了在各种搜索中找到的其他代码。

非常感谢任何帮助。

 $(document).ready(function () {
    function filterPath(string) {
        return string.replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    $('a[href*=#]').each(function () {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            var $target = $(this.hash),
                target = this.hash;
            if (target) {
                var targetOffset = $target.offset().top;
                $(this).click(function (event) {
                    event.preventDefault();
                    $(scrollElem).animate({
                        scrollTop: targetOffset
                    }, 1000, function () {
                        location.hash = target;
                    });
                });
            }
        }
    });


    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
            var el = arguments[i],
                $scrollElement = $(el);
            if ($scrollElement.scrollTop() > 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});


$(".tvMenu").click(function () {
    var btnId = $(this).attr('href');
    var targetImg = parseInt(btnId.substring(1), 10);

    var activeDiv = $("img.tv_active").attr("id");
    var activeImg = parseInt(activeDiv.substring(2), 10);

    for(var hideImg = 0; hideImg < 11; hideImg++){
        if(targetImg != hideImg){
             $("#wrap" + ERROR Not hideImg + " img").removeClass("tv_active").fadeOut(800);
        }
        else{
            $("#wrap" + targetImg + " img").addClass("tv_active").fadeIn(800);
        }
    }

});


var lastScrollTop = 0;

$(window).scroll(function () {
    scrollClick(this);
});

function scrollClick(thisObject) {

    var st = $(thisObject).scrollTop();
    var winH = $(window).height();
    var scrollPos = $(window).scrollTop();
    var docH = $(document).height() / 12;
    var t = 0;

    if (st < lastScrollTop) {

       // test readout back to screen  document.getElementById("demo").innerHTML = "up" + " " + st;
        for (t = 0; t <= 11; t++) {


            if (scrollPos > (((docH * t) + 1) - (winH * 0.66)) && scrollPos < ((docH * (t + 1)) - (winH * 0.66))) {


                $("#sidebar-wrapper").removeClass("active");
                $("#wrap" + t + " img").addClass("tv_active").fadeIn(800);
            } else {
                $("#wrap" + t + " img").removeClass("tv_active").fadeOut(800);
            }
        }
    } else if (st > lastScrollTop) {


       // test readout back to screen  document.getElementById("demo").innerHTML = "down" + " " + st;
        for (t = 0; t < 11; t++) {

            if (scrollPos > (((docH * t) + 1) - (winH * 0.33)) && scrollPos < ((docH * (t + 1)) - (winH * 0.33))) {

                $("#sidebar-wrapper").removeClass("active");
                $("#wrap" + t + " img").addClass("tv_active").fadeIn(800);
            } else if (scrollPos > ((docH * 11))) {
                for (s = 0; s < 11; s++) {
                    $("#wrap" + s + " img").removeClass("tv_active").fadeOut(800);
                }
            } else {
                $("#wrap" + t + " img").removeClass("tv_active").fadeOut(800);
            }
        }
    }
    lastScrollTop = st;
}
});