FullPage.js 导航

分类：编程问答

如何解决FullPage.js 导航

我想使用 fullpage.js 制作一个网站，我做了很多，但我在导航方面遇到了一些问题。自从我第一次使用 fullpage.js 以来，我已经使用了自动滚动，这无疑让事情变得更糟。我在顶部做了一个导航栏，其中有几个导航按钮。如果我点击它，我想滚动到页面的一部分，但是常规的 scrollTo();和其他人不起作用。我还使用 fullpage.js 给出了 navigations: true。我尝试检查自动滚动时会发生什么， 我设法让主页部分的滚动工作，但如果我使用按钮从第二页滚动到第一页，如果我向下滚动，则它会转到第三页。 有人对 fullpage.js 略知一二吗？

代码如下

  var place = [];
  var dest = [];
  animationsAndOther();
  buttons();
  function animationsAndOther() {
    const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

    // tl.to(".text",{ y: "0%",duration: 1,stagger: 0.25 });
    tl.to(".slider",{ y: "-100%",duration: 1.5,delay: 0 });
    tl.to(".intro",duration: 1 },"-=1");
    tl.fromTo(
      "nav",{ background: "black",visibility: "hidden",opacity: 0 },{
        // background: "black",width: "100%",visibility: "visible",opacity: 1,duration: 0.5,}
    );
    tl.fromTo(".big-text",{ opacity: 0 },{ opacity: 1,"-=1");

    const cool = new fullpage("#fullpage",{
      autoScrolling: true,navigation: true,onLeave: (origin,destination,direction) => {
        const come = origin.item.id;
        dest.push(come);
        const header = document.querySelector(".header");
        const colors = ["#8d7676","#2d2c2c","#1b1b1b"];
        const section = destination.item.id;
        console.log(section);
        place.push(`${section}`);
        switch (section) {
          case "home":
            header.style.background = colors[2];
            break;

          case "about":
            tl.to("nav",{
              background: "none",});
            header.style.background = colors[1];
            break;

          case "Downloads":
            tl.to("nav",});
            header.style.background = colors[0];

          default:
            break;
        }
      },});
  }

  function buttons() {
    const ul = document.querySelector(".nav-links");
    const btns = [ul.querySelectorAll("button")][0];
    const autoNav = document.querySelector("#fp-nav");

    moreHardStuff(btns);
    hardStuff(autoNav,dest,btns,place);
  }

  function hardStuff(autoNav,origin,place) {
    const lies = document.querySelectorAll("a");
    lies[1].id = "hme";
    lies[2].id = "abut";
    lies[3].id = "down";
    btns.forEach((element) => {
      element.addEventListener("click",() => {
        // // console.log(origin,place);
        // if (dest.includes("about")) {
        //   lies[2].className = "";
        //   console.log("working!");
        //   if (place.includes("home")) {
        //     lies[2].className = "";
        //     lies[3].className = "";
        //     lies[1].className = "active";
        //   }
        //   // if ((place[0] = "Downloads")) {
        //   //   lies[3].className = "active";
        //   //   lies[2].className = "";
        //   //   lies[1].className = "";
        //   // }
        // }

        place = [];
        dest = [];
      });
    });
  }

  function moreHardStuff(btns) {
    const lies = document.querySelectorAll("a");
    btns[0].addEventListener("click",() => {
      const div = document.querySelector("#fullpage");
      document.body.className = "fp-viewing-0";
      div.style =
        "height: 100%; position: relative; touch-action: none; transform: translate3d(0px,0px,0px); transition: all 700ms ease 0s;";


      if (place.includes("about")) {

        if (dest.includes("home")) {
          lies[1].className = "active";
          lies[2].className = "";
          lies[3].className = "";
          console.log("working!");
          place.length = 0;
          dest.length = 0;

        }
      }
    });
  }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  font-family: "Amiri",sans-serif;
}

.landing {
  min-height: 100vh;
  background: linear-gradient(to bottom,#1b1b1b,#2c2b2b);
  background-size: cover;
  padding: 0rem 5rem;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  justify-content: space-between;
  min-height: 10vh;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links button {
  display: inline;
  border: none;
  background: none;
  color: white;
  padding: 2.5rem;
  font-size: 1.2rem;
}

#logo {
  font-family: "Cairo",cursive;
  font-weight: lighter;
  color: white;
  font-size: 2rem;
}

.big-text {
  border: none;
  background: none;
  color: white;
  position: absolute;
  top: 40%;
  left: 52%;
  transform: translate(-60%,-39%);
  font-size: 3rem;
  font-family: "Montserrat",sans-serif;
}

.intro {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider {
  background: rgb(64,89,112);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}

.intro-text {
  color: rgb(224,236,247);
  font-family: "Amiri",sans-serif;
  font-size: 3rem;
}
.hide {
  background: black;
  overflow: hidden;
}

.hide span {
  transform: translateY(100%);
  display: inline-block;
}

#about {
  background: linear-gradient(to bottom,#2c2b2b,#583a3aaf);
}

#Downloads {
  background: linear-gradient(to bottom,#583a3aaf,#c74848);
}

.header {
  position: sticky;
  z-index: 10;
  transition: all 1s ease;
  top: 0px;
  background: rgb(64,112);
  /* background: linear-gradient(to left,#405970,#304558); */
}

nav h1 {
  margin-left: 2rem;
}

nav h1,nav button {
  flex: 1;
}

#about {
  color: white;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#about h1 {
  margin-top: -15rem;
  font-size: 2.7rem;
  margin-left: 25rem;
}

#about p {
  margin-top: 10rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Hello!</title>
    <link rel="stylesheet" href="resources/fullpage.min.css" />
    <script src="resources/fullpage.min.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Amiri&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="header">
      <nav>
        <h1 id="logo">Hello!</h1>
        <ul class="nav-links">
          <button>Home</button>
          <button>About</button>
          <button>Downloads</button>
        </ul>
      </nav>
    </header>

    <div id="fullpage">
      <section id="home" class="section s1">
        <main>
          <section class="landing">
            <button
              id="home"
              type="submit"
              onclick="window.location.href='./projects/index.html' "
              class="big-text"
            >
              Projects!
            </button>
          </section>
        </main>
        <div class="intro">
          <!-- <div class="intro-text">
            <h1 class="hide">
              <span class="text">Hello!</span>
            </h1>
            <h1 class="hide">
              <span class="text">How Are You?</span>
            </h1>
            <h1 class="hide">
              <span class="text">Im Fine.</span>
            </h1>
          </div> -->
        </div>
        <div class="slider"></div>
      </section>
      <section id="about" class="section s2">
        <h1 class="about">About</h1>
        <p></p>
      </section>
      <section id="Downloads" class="section s3">
        <a href="https://www.google.com">Google!</a>
      </section>
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
      integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ=="
      crossorigin="anonymous"
    ></script>
    <script src="web.js"></script>
  </body>
</html>

解决方法

以下是我可以从你的问题中得出的结论。

我按照你上面说的解决了第二页和第三页的滚动问题，使导航栏按钮响应fullpage.js的scrollTo函数

如果你不熟悉 fullpage.js 的属性 visit this

document.body.onload = function() {
  document.getElementById('home_btn').click();
}

var place = [];

animationsAndOther();

function animationsAndOther() {
  const tl = gsap.timeline({
    defaults: {
      ease: "power1.out"
    }
  });

  // tl.to(".text",{ y: "0%",duration: 1,stagger: 0.25 });
  tl.to(".slider",{
    y: "-100%",duration: 1.5,delay: 0
  });
  tl.to(".intro",duration: 1
  },"-=1");
  tl.fromTo(
    "nav",{
      background: "black",visibility: "hidden",opacity: 0
    },{
      // background: "black",width: "100%",visibility: "visible",opacity: 1,duration: 0.5,}
  );
  tl.fromTo(".big-text",{
    opacity: 0
  },{
    opacity: 1,"-=1");


}

const cool = new fullpage("#fullpage",{
  autoScrolling: true,navigation: true,anchors: ['hme','abt','down'],navigationTooltips: ['Home','About','Downloads']

});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  font-family: "Amiri",sans-serif;
}

.landing {
  min-height: 100vh;
  background: linear-gradient(to bottom,#1b1b1b,#2c2b2b);
  background-size: cover;
  padding: 0rem 5rem;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  justify-content: space-between;
  min-height: 10vh;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links a {
  float: right;
  display: inline;
  border: none;
  background: none;
  color: white;
  padding: 2.5rem;
  font-size: 1.2rem;
  text-decoration: none;
  font-family: 'arial';
}

#logo {
  font-family: "Cairo",cursive;
  font-weight: lighter;
  color: white;
  font-size: 2rem;
}

.big-text {
  border: none;
  background: none;
  color: white;
  position: absolute;
  top: 40%;
  left: 52%;
  transform: translate(-60%,-39%);
  font-size: 3rem;
  font-family: "Montserrat",sans-serif;
}

.intro {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider {
  background: rgb(64,89,112);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}

.intro-text {
  color: rgb(224,236,247);
  font-family: "Amiri",sans-serif;
  font-size: 3rem;
}

.hide {
  background: black;
  overflow: hidden;
}

.hide span {
  transform: translateY(100%);
  display: inline-block;
}

#about {
  background: linear-gradient(to bottom,#2c2b2b,#583a3aaf);
}

#Downloads {
  background: linear-gradient(to bottom,#583a3aaf,#c74848);
}

.header {
  position: fixed;
  z-index: 10;
  transition: all 1s ease;
  top: 0px;
  width: 100%;
  background: rgb(64,112);
  /* background: linear-gradient(to left,#405970,#304558); */
}

nav h1 {
  margin-left: 2rem;
}

nav h1,nav a {
  flex: 1;
}

#about {
  color: white;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#about h1 {
  margin-top: -15rem;
  font-size: 2.7rem;
  margin-left: 25rem;
}

#about p {
  margin-top: 10rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Hello!</title>
  <link rel="stylesheet" href="resources/fullpage.min.css" />
  <script src="resources/fullpage.min.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap" rel="stylesheet" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet" />
</head>

<body>
  <header class="header">
    <nav>
      <h1 id="logo">Hello!</h1>
      <ul class="nav-links">
        <a href="#hme" id="home_btn">Home</a>
        <a href="#abt" id="about_btn">About</a>
        <a href="#down" id="down_btn">Downloads</a>
      </ul>
    </nav>
  </header>
  <div id="fullpage">



    <section id="home" class="section s1">
      <main>
        <section class="landing">
          <button id="home" type="submit" onclick="window.location.href='./projects/index.html' " class="big-text">
              Projects!
            </button>
        </section>
      </main>
      <div class="intro">
        <div class="intro-text">
          <h1 class="hide">
            <span class="text">Hello!</span>
          </h1>
          <h1 class="hide">
            <span class="text">How Are You?</span>
          </h1>
          <h1 class="hide">
            <span class="text">Im Fine.</span>
          </h1>
        </div>
      </div>
      <div class="slider"></div>
    </section>

    <section id="about" class="section s2">
      <h1 class="about">About</h1>
      <p></p>
    </section>

    <section id="Downloads" class="section s3">
      <a href="https://www.google.com">Google!</a>
    </section>

  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
  <script src="web.js"></script>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
VM VirtualBox中安装centos时报错：设置基础软件仓库时出错
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
kafka常见问题
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
hive常见问题
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
装载数据时报错：Failed to execute spark task, with exception 'org.apache.hadoop.hive.ql.metadata.HiveException(Failed to create spark client.)'
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
flume常见问题
报错1：执行到如下就不执行了，没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
hadoop集群常见错误
虚拟及没有启动任何服务器查看jps会显示jps，如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
hive常见错误
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
Linux常见错误
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
使用sqoop一直卡在：mapreduce.Job: Running job: job_1703173956074_0001
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot