Javascript 单页滚动网站在菜单上隐藏图像单击

我一直在编写这段代码，以便在单个页面网站的每个部分进入视口时更改图像。它主要起作用，但如果单击侧菜单，（单击时的.tvMenu），页面将滚动到相关部分，但正如它所做的那样，所有图像显示为各个部分滚动通过视口。我知道原因是onclick隐藏了图像，而scroll取消了它们的隐藏。 我能让它做我想做的事情的唯一方法是在脚本中通过一个错误。（对此不高兴）。顺便说一句，我对这方面还不太熟悉。我使用了在各种搜索中找到的一些其他代码

任何帮助都将不胜感激

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

$（文档）.ready（函数（）{
函数筛选器路径（字符串）{
返回字符串。替换（/^\/，“”）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
$（'a[href*=#]'）。每个（函数（）{
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；
如果（目标）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
event.preventDefault（）；
$（滚动元素）。设置动画({
scrollTop:targetOffset
}，1000，函数（）{
location.hash=目标；
});
});
}
}
});
函数可滚动元素（els）{
for（变量i=0，argLength=arguments.length；i0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}
});
$（“.tvMenu”）。单击（函数（）{
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”+错误未隐藏+“img”）.removeClass（“tv#U活动”）.fadeOut（800）；
}
否则{
$（“#wrap”+targetImg+“img”）.addClass（“活动电视”）.fadeIn（800）；
}
}
});
var lastScrollTop=0；
$（窗口）。滚动（函数（）{
点击（这个）；
});
函数滚动单击（thisObject）{
var st=$（thisObject.scrollTop（）；
var winH=$（window.height（）；
var scrollPos=$（window.scrollTop（）；
var docH=$（document）.height（）/12；
var t=0；
如果（stlastScrollTop）{
//测试读数返回到屏幕文档。getElementById（“demo”）.innerHTML=“down”+”“+st；
对于（t=0；t<11；t++）{
if（scrollPos>（（docH*t）+1）-（winH*0.33））和&scrollPos<（（docH*（t+1））-（winH*0.33）））{
$（“#边栏包装”）.removeClass（“活动”）；
$（“#wrap”+t+“img”）.addClass（“tv#U活动”）.fadeIn（800）；
}否则如果（scrollPos>（（docH*11）））{
对于（s=0；s<11；s++）{
$（“#wrap”+s+“img”）.removeClass（“tv#U活动”）.fadeOut（800）；
}
}否则{
$（“#wrap”+t+“img”）.removeClass（“tv#U活动”）.fadeOut（800）；
}
}
}
lastScrollTop=st；
}
});

你在谈论什么图像？你有一把小提琴可以显示你的问题吗？或者一个实时链接？我如何共享一个小提琴？粘贴相关的代码（html部分中的html，css中的css…你明白了），点击运行测试它。完成后，单击顶部的“保存”，然后您可以共享link@BenPhilipp-我的测试服务器。你真的需要把它放在小提琴上。你的链接只显示了当前的情况（你不想要的错误破解），为了让我们弄清楚如何在没有错误破解的情况下修复它，我们首先需要看看没有错误破解会发生什么（你的描述还不够），然后我们需要能够修改代码并测试它（或者至少我这样做）。我们无法在您的测试服务器上执行此操作。