jQuery插件干扰/其他Javascript答案

【问题标题】：jQuery Plugin Interfering W/ Other JavascriptjQuery插件干扰/其他Javascript
【发布时间】：2015-02-20 05:18:44
【问题描述】：

所以我正在使用一个创建垂直分页动画的插件。

它基本上制作了一个全屏框并通过该框移动“部分”。

这是帮助说明我的意思的 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/

【问题讨论】：

标签： javascript jquery html css jquery-plugins

【解决方案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 Demo

【讨论】：

小提琴似乎完全按照我的意愿工作，但我无法让它在我的代码中工作。当我离开 $('#fullpage').fullpage();并添加您在小提琴演示中使用的代码，导航栏不会隐藏，滚动的 javascript 会跳过所有部分并滚动到最后一个部分。如果我删除 $('#fullpage').fullpage();并将您的代码放入，滚动将不再起作用。我做错了什么？
您必须删除代码并将其替换为我的。奇怪的是它不适合你。您在控制台中看到任何错误吗？
我刚刚复制了你在小提琴中的整个 javascript，当我自己输入它时我一定犯了一个错误，因为你有什么工作。非常感谢！
@Ed117 我已经为这些盒子使用了索引。检查fiddle
大多数插件都会公开所有此类计算的事件。很高兴知道它有帮助:)