jQuery插件和其他Javascript_Javascript_Jquery_Html_Css_Jquery Plugins

jQuery插件和其他Javascript

javascript jquery html css jquery-plugins

jQuery插件和其他Javascript,javascript,jquery,html,css,jquery-plugins,Javascript,Jquery,Html,Css,Jquery Plugins,所以我使用了一个插件来创建垂直分页动画它基本上是制作一个全屏框，并通过这个框移动“部分” 下面是帮助说明我的意思的html <div id="fullpage"> <div class="section"></div> <div class="section"></div> <div class="section"></div> </div> 因此，该插件不再触发y>0，因

所以我使用了一个插件来创建垂直分页动画

它基本上是制作一个全屏框，并通过这个框移动“部分”

下面是帮助说明我的意思的html

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

因此，该插件不再触发

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>


阿尔迪更名





ALDI Rebrand品牌|徽标|印刷
ALDI是一家国际杂货商，业务范围从德国到美国以及世界上许多其他国家
这个为期一学期的项目背后的前提是让我们沉浸在分配给我们的公司/品牌中。我被分配到阿尔迪。在这种情况下，品牌更名的目标是向阿尔迪和他们提议的农贸市场添加到他们的商店，传达一种新的“新鲜和本地”的一面。我们被要求创建一个全新的徽标、至少四份宣传资料和一份品牌指南，以展示我们的研究、品牌应用和灵活性
1
3

这是本页的一个jsfiddle:

您可以使用事件获取滚动索引值并切换类

滚动

$('#fullpage').fullpage({
        onLeave: function (anchorLink, index, slideIndex, direction) {
            //console.log(index);
            if (index > 1) {
                $('#navBar').addClass('scroll');
            } else {
                $('#navBar').removeClass('scroll');

            }
        }
    });

看来小提琴的工作方式正是我想要的，但我无法让它在我的代码中工作。当我离开$（'#fullpage'）.fullpage（）行时；并添加您在fiddle演示中使用的代码，导航栏不会隐藏，滚动javascript会跳过所有部分并滚动到最后一部分。如果我删除$（'#fullpage'）.fullpage（）；把你的代码放进去，滚动就不起作用了。我做错了什么？你必须删除代码并用我的代码替换它。奇怪，它对你不起作用。你在控制台中看到任何错误吗？我刚刚复制了你在小提琴中的整个javascript，我自己键入它时一定犯了错误，因为你所做的工作正常。非常感谢@Ed117我已经使用了索引框。检查大多数插件公开所有此类计算的事件。很高兴知道这有帮助：）

$('#fullpage').fullpage({
        onLeave: function (anchorLink, index, slideIndex, direction) {
            //console.log(index);
            if (index > 1) {
                $('#navBar').addClass('scroll');
            } else {
                $('#navBar').removeClass('scroll');

            }
        }
    });