jQuery插件干扰W/其他Javascript
jQuery Plugin Interfering W/ Other Javascript
所以我使用了一个创建垂直页面动画的插件。
它基本上制作了一个全屏框,并在这个框中移动"部分"。
这是帮助显示我的意思的html。
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
我有一个简单的javascript函数,可以在你向下滚动时隐藏我的导航。问题是,有了这个新插件,你实际上并没有向下滚动。部分只是在一个固定的盒子里移动。
这是我用于导航的javascript函数。
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#navBar').addClass('scroll');
}
else{
$('#navBar').removeClass('scroll');
}
});
因此y > 0
不再使用此插件触发,因此导航不会正确隐藏。
我认为必须有一种方法来稍微更改这个简单的代码并使其工作。也许可以通过在分区内使用ID?
以下是我的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>
下面是这个页面的一个jsfiddle:https://jsfiddle.net/L0h1uxLo/1/
您可以使用onLeave
事件来获取滚动的索引值并切换类scroll
。
$('#fullpage').fullpage({
onLeave: function (anchorLink, index, slideIndex, direction) {
//console.log(index);
if (index > 1) {
$('#navBar').addClass('scroll');
} else {
$('#navBar').removeClass('scroll');
}
}
});
Fiddle演示
相关文章:
- Javascript阻止其他Javascript代码
- 在其他javascript框架模板中运行angular指令
- 如何使用javascript、jquery或其他javascript框架过滤数据
- Meteor:引用不同目录中的其他javascript类
- 如何使用其他 JavaScript 文件中的新类访问我的 createjs 导出的 js 文件
- 使用其他javascript文件nodejs和express发送和获取数据 socket.io
- 在WordPress上运行其他javascript之后再运行javascript
- 此JavaScript函数可以单独使用,但不能与其他JavaScript函数一起使用
- document.write和document.innerHTML以及其他javascript问题之间有什么区别
- 停止jQuery表单验证重置由其他JavaScript填充的typeahead.js输入字段
- jQuery插件干扰W/其他Javascript
- 是否可以将条件语句或其他javascript作为参数传递到ember句柄中
- 如果我用javascript隐藏了一个文本输入元素,那么其他javascript函数仍然可以访问输入到其中的值
- 如何在Chrome扩展名的内容JS文件中包含其他JavaScript文件
- 如何加载 jQuery 和其他 JavaScript 文件
- jQuery .click .appendTo 不加载其他 javascript
- 使用 jQuery 从其他 JavaScript 文件设置变量值
- 是否可以在GWT或任何其他JavaScript框架中选择垃圾收集算法
- 如何调用在其他 JavaScript 文件中定义的静态 JS 函数
- Twitter iframe和其他JavaScript获取前者内容的执行顺序