视差切换菜单中的图像

Question

我的视差函数有问题here 功能本身效果很好，但每当我向下滚动到视差图像的位置（例如在其中一个产品页面上），同时将鼠标悬停在顶部菜单产品上时，它会使图像消失。据我所知，它只发生在Chrome中。

我肯定知道它是视差功能，因为如果我删除了视差镜div，那么一切都会很好。

有没有人经历过同样的事情，或者知道为什么会这样做，请告诉我！

编辑：嗨，这是一个小伙伴！ http://jsfiddle.net/fxL7yq35/7/

＆＃13;

＆＃13;

/*!
 * parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2015 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 */
!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];return r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),("top"==r[0]||"bottom"==r[0]||"left"==r[1]||"right"==r[1])&&(r=[r[1],r[0]]),this.positionX!=s&&(r[0]=this.positionX.toLowerCase()),this.positionY!=s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(this.positionX=isNaN(parseInt(this.positionX))?"center":parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(this.positionY=isNaN(parseInt(this.positionY))?"center":parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/)?(this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):navigator.userAgent.match(/(Android)/)?(this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):(this.$mirror=t("<div />").prependTo("body"),this.$slider=t("<img />").prependTo(this.$mirror),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),this.$slider[0].src=this.imageSrc,void((this.naturalHeight&&this.naturalWidth||this.$slider[0].complete)&&this.$slider.trigger("load")))}function h(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")||(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&o[s]()})}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s<e.length&&!i.requestAnimationFrame;++s)i.requestAnimationFrame=i[e[s]+"RequestAnimationFrame"],i.cancelAnimationFrame=i[e[s]+"CancelAnimationFrame"]||i[e[s]+"CancelRequestAnimationFrame"];i.requestAnimationFrame||(i.requestAnimationFrame=function(e){var s=(new Date).getTime(),o=Math.max(0,16-(s-t)),h=i.setTimeout(function(){e(s+o)},o);return t=s+o,h}),i.cancelAnimationFrame||(i.cancelAnimationFrame=function(t){clearTimeout(t)})}(),t.extend(o.prototype,{speed:.2,bleed:0,zIndex:-99999,iosFix:!0,androidFix:!0,position:"center",overScrollFix:!1,refresh:function(){this.boxWidth=this.$element.outerWidth(),this.boxHeight=this.$element.outerHeight()+2*this.bleed,this.boxOffsetTop=this.$element.offset().top-this.bleed,this.boxOffsetLeft=this.$element.offset().left,this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var t=o.winHeight,i=o.docHeight,e=Math.min(this.boxOffsetTop,i-t),s=Math.max(this.boxOffsetTop+this.boxHeight-t,0),h=this.boxHeight+(e-s)*(1-this.speed)|0,r=(this.boxOffsetTop-e)*(1-this.speed)|0;if(h*this.aspectRatio>=this.boxWidth){this.imageWidth=h*this.aspectRatio|0,this.imageHeight=h,this.offsetBaseTop=r;var n=this.imageWidth-this.boxWidth;this.offsetLeft="left"==this.positionX?0:"right"==this.positionX?-n:isNaN(this.positionX)?-n/2|0:Math.max(this.positionX,-n)}else{this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0;var n=this.imageHeight-h;this.offsetBaseTop="top"==this.positionY?r:"bottom"==this.positionY?r-n:isNaN(this.positionY)?r-n/2|0:r+Math.max(this.positionY,-n)}},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.visibility=this.boxOffsetBottom>t&&this.boxOffsetTop<s?"visible":"visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed),this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop-e,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){if(!this.isReady){var s=t(e),h=t(i);h.on("scroll.px.parallax load.px.parallax",function(){var t=o.docHeight-o.winHeight,i=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(t,h.scrollTop())),o.scrollLeft=Math.max(0,Math.min(i,h.scrollLeft())),o.overScroll=Math.max(h.scrollTop()-t,Math.min(h.scrollTop(),0)),o.requestRender()}).on("resize.px.parallax load.px.parallax",function(){o.winHeight=h.height(),o.winWidth=h.width(),o.docHeight=s.height(),o.docWidth=s.width(),o.isFresh=!1,o.requestRender()}),this.isReady=!0}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;this.isBusy||(this.isBusy=!0,i.requestAnimationFrame(function(){t.render(),t.isBusy=!1}))}});var r=t.fn.parallax;t.fn.parallax=h,t.fn.parallax.Constructor=o,t.fn.parallax.noConflict=function(){return t.fn.parallax=r,this},t(e).on("ready.px.parallax.data-api",function(){t('[data-parallax="scroll"]').parallax()})}(jQuery,window,document);

＆＃13;

/* P A R A L L A X */


.parallax-fullwidth {
    height: 550px;
    background: transparent;
	position:relative; 
	overflow:hidden !important;
}

.parallax-fullwidth .two-column-left,
.parallax-fullwidth .two-column-right {
	padding: 50px 10%;
	width: 35% !important;
	text-align: center;
	min-width: 300px}

.parallax-mirror {
	/*overflow: hidden !important;*/
	overflow: visible !important;}
	

/* MENU */


.sub-navigation {
	clear: both;
	margin: 0 auto;
	background-color: #f1efeb;
	padding: 0px 10%;
	width: 80%;
	z-index: 1;
	position: relative;
	padding-top:55px;
	height: 60px;
	
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;}

.sub-holder,
.nav-holder {
	text-align: left;
	display:inline-table;
	margin-left: 0px;
	float: right;
	width: 100%;
	
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus,
.sub-menu li:hover > a,
.sub-menu li a:hover,
.sub-menu li:focus > a,
.sub-menu li a:focus {
	// set animation
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;}

.sub-navigation .sub-menu li {
	text-align: left;
	min-width: 130px;
	margin: 0px !important;
	height: 50px;
	padding: 3px 2px 7px;}
	
.main-navigation .nav-menu li {
	text-align: center;
	margin: 8px 0px 0px;
	height: 45px;
	padding: 10px 0px 3px;}
	
.main-navigation .nav-menu li.main-item {
	padding: 10px 3px 3px;}
	
.sub-navigation .sub-menu li a {
	font-size: 12px;}

.sub-navigation .sub-menu li a:hover {}
	
	
.sub-navigation .sub-menu li:hover {
	background: #e3e1dc;}

.sub-navigation .navigation-link,
.main-navigation .navigation-link {
	position: absolute;
	bottom: 8px;
	float: left;
	line-height: 1.2em;
	}
	
.sub-navigation .back,
.main-navigation .back {
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s;
    background-color:rgba(0, 0, 0, 0.5);
    height:0;
    width:100%;}

.sub-navigation:hover div.back,
.main-navigation:hover div.back {
    height:250px;}
	
ul.sub-menu,
ul.nav-menu {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    width: 100% !important;
    position:relative;}
	
ul.sub-menu li,
ul.nav-menu li {
    float:right;
    margin:0 5px 0 0;
	line-height: normal !important;}
	
ul.nav-menu li {
	font-size: 15px;
	margin-top: 7px;}
	
ul.sub-menu li > a,
ul.nav-menu li > a {
    -webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
    display:table-cell;
	vertical-align: bottom;
    padding:0 6px;
    text-decoration:none;
}
.active {
color:#a2a09c !important;}

ul.sub-menu li > a {
	height: 50px;}

ul.sub-menu li a img,
ul.nav-menu li a img {
    vertical-align: bottom !important;
	bottom: 0px;
}

.subs {
    left:0;
    position:absolute;
    top:60px;
    width:100%;
	font-size: 16px;
	visibility: hidden;
  	opacity:0;
	height: 0px;
	text-align: left;
	overflow: hidden;
	
	transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
	-webkit-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
	-moz-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
	-o-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
}

.main-navigation .subs {
	top: 55px;}

.sub-menu > li:hover > .subs,
.nav-menu > li:hover > .subs {
    background: #e3e1dc;
	visibility: visible;
	opacity: 1;
	height: 450px !important;
	
	// set animation
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}

.subs > .subs-content {
	padding: 4% 8%;
	opacity: 0;
	
	transition: opacity 0.5s ease 0.2s;
	-webkit-transition: opacity 0.5s ease 0.2s;
	-moz-transition: opacity 0.5s ease 0.2s;
	-o-transition: opacity 0.5s ease 0.2s;
	}

.subs-content .icon-description {
	margin-top: 10px !important;}	
	
.icon-description {
	margin-top: 30px;}
	
.icon-description h4 {
	margin: 0px !important;}

	
.sub-menu > li:hover > .subs .subs-content,
.nav-menu > li:hover > .subs .subs-content {
	opacity: 1;}
	
	
.subs > .subs-content > .subs-column {
	float: left;
	width: 49%;
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 0px;
	top: 20px;}
	
.subs-column img {
	width: 100%;
	height: auto;
	max-width: 470px}
	
.subs > .subs-content > .subs-column-right {
	float: right;
	width: 46%;}

.sub-menu li div.subs dl,
.nav-menu li div.subs dl {
    -moz-transition-duration:.2s;
    -o-transition-duration:.2s;
    -webkit-transition-duration:.2s;
    float:left;
    margin:0 130px 0 0;
    overflow:hidden;
    padding:40px 0 5% 2%;
    width:0;
}
.sub-menu dt,
.nav-menu dt {
    color:#fc0;
    font-family:arial, sans-serif;
    font-size:12px;
    font-weight:700;
    height:20px;
    line-height:20px;
    margin:0;
    padding:0 0 0 10px;
    white-space:nowrap;
}
.sub-menu dd,
.nav-menu dd {
    margin:0;
    padding:0;
    text-align:left;
}
.sub-menu dd a,
.nav-menu dd a {
    background:transparent;
    color:#fff;
    height:20px;
    padding:0 0 0 10px;
    text-align:left;
    white-space:nowrap;
    width:80px;
}
.sub-menu dd a:hover,
.nav-menu dd a:hover {
    color:#fc0;
}
.sub-menu li:hover div.subs dl,
.nav-menu li:hover div.subs dl {
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
    margin-right:2%;
    width:21%;
}
ul.sub-menu li:hover > a,
ul.sub-menu li > a:hover,
ul.nav-menu li:hover > a,
ul.nav-menu li:hover > a {
    color: #a2a09c;
}

ul.sub-menu li:hover:after,
ul.nav-menu li:hover:after {
	background: url(../images/sub_hover.png);
	width: 33px;
	height: 20px;}

.sub-menu li:hover div.subs,
.sub-menu li a:hover div.subs,
.nav-menu li:hover div.subs,
.nav-menu li a:hover div.subs {
    width:100%;
}


	
.nav-menu .sub-item {
	min-width: 10px !important;
	margin-top: 0px !important;
	padding: 4px 0px 6px !important;
	opacity: 1;
	visibility: visible;}
	
.nav-menu .sub-item a {
	height: 46px;}
	
	
.nav-menu .sub-item:hover {
	background: #e3e1dc;}

.js .nav-menu {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  zoom: 1;
}	

.nav-menu.opened {
  max-height: 9999px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<nav class="sub-navigation">
            <div class="navigation-content">
				<ul class="sub-menu slide">
            <li><a href="/products/viktstart/"><img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon_small.png" class="img_left" /><span class="navigation-link">Betavivo <br />
<span class="viktstart-text">vikt>start</span></span></a>
                <div class="subs">
                				<div class="subs-content">
                                <div class="subs-column">
                                    <img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon.png" />
                                    </div>
                    				<div class="subs-column-right"><h2>Betavivo <br>
										<span class="viktstart-text">vikt>start</span></h2>
                    					<p>Betavivo vikt>start är ett kosttillskott med glukomannan som bidrar till viktminskning.</p>
                    					<a href="/products/viktstart/" class="button orange">Läs mer</a>
                    					<div class="clear"></div>
                                        <div class="icon-description">
                   						 <img src="http://betavivo.se/wp-content/themes/betavivo/images/icon_weightloss.png" class="icon_left" />
                    					<div style="overflow:hidden;">
                                        <h4>Viktminskning</h4>
                    					<small>Glukomannan bidrar till viktminskning i samband med intag av en energibegränsad kost.</small>
                                        </div>
                                        </div>
                    
                    				</div>
                    				<div class="clear"></div>
                				</div>
                			</div>
            </li>
        </ul>
				<div class="clear"></div>
                </div>
			</nav>
            hej
            <div class="parallax-fullwidth animatedParent" data-position="top" data-parallax="scroll" data-speed="0.5" data-bleed="10" data-image-src="http://betavivo.se/wp-content/uploads/2015/05/Viktstart.jpg" data-natural-width="2000" data-natural-height="1333" data-position="0px 0px"></div>

＆＃13;

＆＃13;

＆＃13;