[英]jQuery Plugin Interfering W/ Other Javascript
So I am using a plugin that creates a vertical paging animation. 所以我正在使用一个创建垂直分页动画的插件。
It basically makes a fullscreen box and moves the "sections" through this box. 它基本上是制作一个全屏框,并在此框内移动“部分”。
Here is the html to help show what I mean. 这是帮助显示我的意思的html。
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I had a simple javascript function to hide my nav whenever you scroll down. 当您向下滚动时,我有一个简单的javascript函数可隐藏导航。 The problem is, with this new plugin, you don't actually scroll down.
问题是,有了这个新插件,您实际上并没有向下滚动。 Sections just move inside a stationary box.
部分仅在固定的盒子内移动。
Here is the javascript function I was using for the nav. 这是我用于导航的javascript函数。
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#navBar').addClass('scroll');
}
else{
$('#navBar').removeClass('scroll');
}
});
So the y > 0
doesn't trigger with this plugin anymore so the nav won't hide properly. 因此
y > 0
不会再与此插件一起触发,因此导航不会正确隐藏。
I'm thinking there has to be a way to change this simple code a little and make it work. 我认为必须有一种方法可以稍微更改一下此简单的代码并使它工作。 Maybe by using IDs inside the sections possibly?
也许通过在部分内部使用ID?
Here is how my html looks with the general structure from the plugin applied. 这是我的html与所应用插件的一般结构的外观。
<!DOCTYPE html>
<html>
<head>
<title>Aldi Rebrand</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="red">
<div id="navBar" class="preHidden">
<a href="index.html"><img id="navLogo" src="images/navLogo.png"></a>
<ul>
<li class = "navLink mainLink"><a href="index.html">Work</a></li>
<li class = "navLink mainLink"><a href="about.html">About</a></li>
<li class = "navLink mainLink"><a href="https://ggann.tumblr.com">Blog</a></li>
</ul>
</div>
<div id="fullpage">
<div class="section">
<div id="aldiPhoto"></div>
<div id="descriptionAldi">
<h2>ALDI Rebrand <span>BRANDING | LOGO | PRINT</span></h2>
<p class="intro"><strong>ALDI</strong> is an international grocer, spanning from Germany to The United States and many other countries around the world.</p>
<p class="prjctDescription">The premise behind this semester long project was to immerse ourselves in the company/brand we were assigned. I was assigned ALDI. In this scenario, the goal of the rebrand was to convey a new “fresh and local” side to ALDI and their proposed farmers market addition to their stores. We were asked to create a brand new logo, at least four pieces of collateral and a brand guideline to demonstrate our research, branding applications and flexibility.</p>
<div class="btnDiv">
<a href="https://dribbble.com/shots/1869394-ALDI-Rebrand" class="btnText"><div class="btn1"><p>VIEW ON DRIBBBLE</p></div></a>
<a href="https://www.behance.net/gallery/22556203/ALDI-Rebrand" class="btnText"><div class="btn2"><p>VIEW ON BEHANCE</p></div></a>
</div>
</div>
</div>
<div class="section">
<div id="aldiPage2"></div>
</div>
<div class="section">
<div id="aldiPage3"></div>
</div>
</div>
<div class="ticker"><p class="currentPage">1</p><div class="tickerBtm"><p class="maxPage">3</p></div></div>
</body>
</html>
And here is a jsfiddle of this page: https://jsfiddle.net/L0h1uxLo/1/ 这是此页面的jsfiddle: https ://jsfiddle.net/L0h1uxLo/1/
You can use the onLeave
event to get the scrolled index value and toggle the class scroll
. 您可以使用
onLeave
事件获取滚动索引值并切换类scroll
。
$('#fullpage').fullpage({
onLeave: function (anchorLink, index, slideIndex, direction) {
//console.log(index);
if (index > 1) {
$('#navBar').addClass('scroll');
} else {
$('#navBar').removeClass('scroll');
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.