javascript - 使用 fullPage.js 定位导航栏-6ren

javascript - 使用 fullPage.js 定位导航栏

转载作者：行者123 更新时间：2023-12-03 04:52:20

28

4

我的应用程序使用 fullPage.js。为了让我的导航栏在滚动后正常工作，我必须在 html 部分添加此代码片段:

<style>
    header{
        position: fixed;
        z-index:1;
    }

</style>

如果没有它，当我向下滚动时，导航栏中的按钮/链接将无法单击。不幸的是，随着代码的添加，我的导航栏的排列完全不正常。我能做些什么，这样“位置固定”就不会破坏我的安排吗？

<html>
<head>
  <title>Columbia Ride Share</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" type="text/css" href="fullpage.js/jquery.fullPage.css" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="jquery.fullPage.js"></script>
  <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage();
        });
    </script>
<style>
    header{
        position: fixed;
        z-index:1;
    }

</style>

</head>
<body>
  <header> 
       <h1 class = "page-title">Columbia Ride Share</h1>
       <nav>
           <ul>
               <li><a href="#top">home</a></li>
               <li><button class="btn btn-link" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button></a></li>
               <div id="id02" class="modal">
                  <form class="modal-content animate" action="action_page.php">
                      <div class="imgcontainer">
                           <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                      </div>
                      <div class = "loginMsg">
                      <p>Where are you headed?<p>
                          <a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
                          <a href="create-a-ride-from-airport.html">I need a ride to campus</a>
                      </div>
                   </form>
               </div>

               <li class = "login">
                   <button onclick = "document.getElementById('id01').style.display='block'"style="width:auto;">LOGIN</button>
               </li>
               <div id="id01" class="modal">
                   <form class="modal-content animate" action="action_page.php">
                       <div class="imgcontainer">
                           <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                            </div>
                           <div class="loginMsg">
                               <p>hi there!</p>
                               <p>log in to post and comment on columbia ride share</p>
                           </div> 
                           <button class="loginBtn loginBtn--facebook">connect with facebook</button>
               <button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google     </button>
                    </form>
               </div>

           </ul>
       </nav>
  </header>
  <div id ="fullpage">
  <div class="section" id="section0">
  <div class="container">
    <div class="main">
        <div class = "JFK">
            <h6>JFK</h6>
               <p> <a href = "toJFK.html">to</a>
                   <a href = "#">from</a></p>
        </div>
        <div class = "Newark">
           <h6>NEWARK</h6>
                <p> <a href = "ridesToJFK.html">to</a>
                <a href = "#">from</a></p>
        </div>
        <div class = "bottomRow">
           <h6>LAGUARDIA</h6>
                <p> <a href = "ridesToJFK.html">to</a>
                <a href = "#">from</a></p>
        </div>
           <div class = "createRide">
              <button class = "button" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button>
           </div>    
           <div id="id02" class="modal">
           <form class="modal-content animate" action="action_page.php">
               <div class="imgcontainer">
                       <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                   </div>
           <div class = "loginMsg">
                       <p>Where are you headed?<p>
                           <a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
                           <a href="create-a-ride-from-airport.html">I need a ride to campus</a>
                    </div>
        </form>
            </div>
        </div>
    </div>
    </div>
          <div class="section" id="section1"> 
          <div class = "welcome">
               <div class = "intro">
                   <p>Lorem ipsum elementum libero curae nam in id maecenas per, inceptos dui a aliquam velit eu ullamcorper ultricies platea, nibh adipiscing pulvinar nunc justo taciti non magna interdum lectus ligula cursus ornare aenean lacus tincidunt, semper gravida bibendum vitae laoreet morbi pharetra, nunc tellus donec imperdiet cubilia consectetur.Suscipit fermentum euismod etiam facilisis metus quam litora blandit himenaeos, convallis placerat felis mollis aliquam ante fringilla morbi tincidunt, at curabitur ligula sapien iaculis risus nullam platea morbi cursus adipiscing aliquet tempor commodo quis leo metus sem dictum.</p>
               </div>
            </div>
         </div>
      </div>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M",
    authDomain: "columbia-ride-share.firebaseapp.com",
    databaseURL: "https://columbia-ride-share.firebaseio.com",
    storageBucket: "columbia-ride-share.appspot.com",
    messagingSenderId: "1058399238109"
  };
  firebase.initializeApp(config);
  var rootRef = firebase.database().ref();

</script>
<script src = "app.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<script>
jQuery(window).scroll(function(){
    var fromTopPx = 200; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});
</script>
<script> 
var modal = document.getElementById('id02');

window.onclick= function(event){

    if(event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<script>  
      window.onload = function() {
         initApp();
      };
</script>
<script>
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
</script>


</body>
</html>

我的CSS代码是:

a{
    color: #c4d8e2;
}
body {
        height: 100%;
        margin: 0;
        width: 100%;
        color: #c4d8e2;
        font-family: "Helvetica Neue Light", Helvetica Neue, serif;
}


.page-title {
    position: relative;
    padding-top: -5%;
    font-size: 36px;
    font-weight: lighter;  
    margin-left:5%;
    line-height:35%;
}

.container {
    max-width: 70%;
    margin-top: 2%;
}
.Newark {
    position:relative;
    float: left;
    left: 35%;
    height: 301px; 
    width: 301px;
    margin: 5px;
    margin-top: -14%; 
    background-image: url(chelsea.jpg);
    background-size: 301px 301px;
    line-height: 200px;   
    text-align: center;
    font-variant: small-caps;

}

.Newark h6{
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;

}


.Newark p{
    position: relative;
    top: -170px;
    word-spacing: 100px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
    color: #c4d8e2;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    display: none;
}

.Newark p a{
    color: #c4d8e2;
    top: -30px;
}


.Newark:hover p {
    display: block;
    /*opacity: 0.6;*/
}

.Newark:hover{
    opacity: 0.6;
    display: block;
}


.JFK {
    position:relative;
    float: left;
    left: 35%;
    height: 301px; 
    width: 301px;
    margin: 5px;
    margin-top: -14%; 
    background-image: url(brooklyn.jpg);
    background-size: 301px 301px;
    line-height: 200px;   
    text-align: center;
    font-variant: small-caps;

}

.JFK h6{
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;

}


.JFK p{
    position: relative;
    top: -170px;
    word-spacing: 100px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
    color: #c4d8e2;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    display: none;
}

.JFK p a{
    color: #c4d8e2;
    top: -30px;
}


.JFK:hover p {
    display: block;
    /*opacity: 0.6;*/
}

.JFK:hover{
    opacity: 0.6;
    display: block;
}

.bottomRow {
    position:relative;
    float: left;
    left: 35%;
    height: 301px; 
    width: 301px;
    margin: 5px; 
    background-image: url(nyu2.jpg);
    background-size: 301px 401px;
    line-height: 200px;   
    text-align: center;
    border-bottom: 1px white;
    border-top: 1px white;
    font-variant: small-caps;

}

.bottomRow button{
    position: relative;
    background-color: transparent;
    border: none;
    padding: 110px 89px;
    cursor:pointer;
    text-align:center;
    color: #c4d8e2;
    font-size:33px;
    font-variant: small-caps;
    font-weight:700;
}


.bottomRow h6{
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
}


.bottomRow p{
    position: relative;
    top: -170px;
    word-spacing: 100px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
    color: #c4d8e2;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    display: none;
}

.bottomRow p a{
    color: #c4d8e2;
    top: -30px;
}


.bottomRow:hover p {
    display: block;
    /*opacity: 0.6;*/
}

.bottomRow:hover{
    opacity: 0.6;
    display: block;
}


.createRide {
    position:relative;
    float: left;
    left: 35%;
    height: 301px; 
    width: 301px;
    margin: 5px; 
    background-image: url(train.jpg);
    background-size: 401px 301px;
    background-position: 300px 300px
    line-height: 200px;   
    text-align: center;
    border-bottom: 1px white;
    border-top: 1px white;
    font-variant: small-caps;

}

.createRide button{
    position: relative;
    background-color: transparent;
    border: none;
    padding: 110px 89px;
    cursor:pointer;
    text-align:center;
    color: #c4d8e2;
    font-size:33px;
    font-variant: small-caps;
    font-weight:700;
}


.createRide h6{
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
}


.createRide p{
    position: relative;
    top: -170px;
    word-spacing: 100px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: 600;
    color: #c4d8e2;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    display: none;
}

.createRide p a{
    color: #c4d8e2;
    top: -30px;
}


.createRide:hover p {
    display: block;
    /*opacity: 0.6;*/
}

.createRide:hover{
    opacity: 0.6;
    display: block;
}




/*Navigation Bar*/ 
nav ul {
   display: inline;
}

nav li{
  margin: 0; 
  padding: 0 10px;
  display: inline; 
  position: relative;
  left: 63.5%;
  top: -45px;
  font-variant: small-caps; 
  font-weight: 500;
}
nav li a{
    text-decoration:none;

}
.loginMsg{
    display: relative;
    margin-top: 25%;
    font-size: 22px;
    color: black;
}

.loginMsg p{

     text-align: center;
}
.loginMsg a{
    display:block;
    margin-top:13px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    border: 12px solid #888;
    border-color: #c4d8e2;
    width: 30%; /* Could be more or less, depending on screen size */
    height: 60%;

}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0; 
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Shared */
.loginBtn {
  padding: 2em;
  box-sizing: border-box;
  position: relative;
  width: 13em;  - apply for fixed size 
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  font-variant: small-caps; 
  top: 10%; 
  left: 20%;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
  display: block;
  background-color: #4C69BA;
  margin-bottom: 5px;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
  font-family: "Roboto", Roboto, arial, sans-serif;
  background: #DD4B39;
  display: block; 
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

.instructions{
    position: relative;
    margin-left:10%;
    margin-top: 50%;
    font-size: 36px;
}

button {
    background: none; 
    padding: 0;
    border: none;
    font-family: "Helvetica Neue Light", Helvetica Neue, serif;
    font-variant: small-caps;
    font-weight: 500;    
    color: #c4d8e2;
}

button:hover{
    cursor: pointer;
}

.welcome{
   background-color: #c4d8e2;
   height: 100%;
   width:100%;
   margin-top:-3%;
   max-width: 100%;
   float:left;
   clear: left;

}
.intro{
   margin-left:10%;
   display: block;
}

.intro p{
    color:white;
    font-size: 32px;
}

最佳答案

我可以通过将标题的 z-index 设置为 1 来访问导航栏。z-index 指定元素的堆栈，因此通过将其设置为 1，我可以将其放在“前面” “section1”分区。但我还必须设置标题的位置，如果我选择绝对，那么它完全破坏了我在 css 文件中给它的所有相对值。通过将其设置为相对，我能够保留我在 css 文件中想要的排列。

<style>
    header{
        position: relative;
        z-index:1;
    }

</style>

关于javascript - 使用 fullPage.js 定位导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42604250/

28

4

0

文章推荐： javascript - 以编程方式从对象添加方法

文章推荐： javascript - 如果元素丢失则忽略的数组

文章推荐： javascript - Angular 1.6 $http.get 无法读取 json

java - 当后端进程运行时如何显示进度消息/栏？
我使用 Runtime.getRuntime().exec 来运行 perl 程序。现在我想在执行过程中显示百分比进度条，然后在perl程序执行完成后，它应该关闭进度条。我该怎么做？ Runtime.
html - 消失的导航链接/栏
我已广泛搜索该网站，但找不到答案。请我是新手，我需要你的帮助。我想创建一个固定的导航栏，但每次在我的 CSS 样式表中放置一个固定的规则时，导航栏都会消失。这是我的 html 代码:
右侧带有控件的 CSS 栏
Here's a nice jsFiddle illustrating the problem 我正在尝试创建一个标题栏元素... 永远只有 1 行高在右上角有始终存在的控件在左上角有一个标题，如
函数参数中的 C++ 栏
int fd = open(JOYSTICK_NAME, O_RDONLY | O_NONBLOCK); O_RDONLY 和 O_NONBLOCK 之间的栏是什么意思？我在 OpenGL/GLUT
html - 页面底部的空白/栏
我注意到我的网页在页脚之后和页面底部有一个空白/栏: 我试图通过使用 Chrome 中的 inspect 元素来查找此问题的原因，但找不到任何内容。我正在使用 Boostrap，这是我的页脚 HTML
Android透明状态栏和 Action 栏
我已经对这个主题进行了一些研究，但我找不到完整的解决方案，因此，我一步一步地尝试和错误，我终于找到了如何实现这些结果:透明或彩色Actionbar 和 Statusbar。请参阅下面的答案。最佳答案
javascript - 添加独立于类别的栏("reference"栏)
Highcharts 教程中的经典示例是: $(function () { $('#container').highcharts({ chart: { type: 'bar'
ios - 高度错误的模态 UINavigationController 栏
注意 :这与 iOS 13 中使用的新默认模态呈现样式无关。我有一个奇怪的问题，显示模态 UINavigationController . 考虑一个 UIViewController位于 UINav
javascript - 如何在页面加载时隐藏 iPad 栏？
我需要帮助了解如何在加载页面时隐藏 iPad 地址栏或顶部的整个地址栏。我正在开发基于在线客户管理系统的系统，需要隐藏 iPad 地址栏，因为它在查看网站时会占用大量空间。问候涡流已经尝试了以下
javascript - 将文本添加到 d3 栏
我在向栏中添加文本时遇到了一些问题。我想在栏上方显示值，但我无法向每个栏添加文本。现在我的dom结构是: g rect rect rect 我想要什么: g g.bar rect
c# - 如何修改 ListView 栏？
我有 ListView ，数据将从数据表显示在 ListView 中像这样我已经完成了但是我在数据行 6 有问题 dt = classes.xxxxx.GetData(sql,
javascript - 右对齐 Highcharts 栏
我使用 opposite 属性将 xAxis 向右移动。条形图怎么可能也从右侧开始？谢谢! Highcharts.chart('absoluteInterruptions', { chart:
iphone - 使图像适合 UINavigationBar 栏
我得到了这张图片，我想在我的导航 Controller 中使用它: 我是这样设置的(根据 this 问题的建议): UINavigationBar *theBar = self.navigationC
java - 代码上方的 Eclipse 栏
这个问题在这里已经有了答案: How to disable breadcrumbs in Eclipse (11 个答案) 关闭 9 年前。有谁知道如何删除我在 Eclipse 中用红色圈出的栏？
ios - 尝试仅允许某些字符串进入 URL 栏
总而言之，我的应用程序中有一个浏览器，我希望它只启动 5 个网站，仅此而已。有没有办法让我的浏览器通过设置自定义字符串来启动 5 个网站，例如 if {用户键入此字符串} 转到该网站，然后 else
ios - 过程中的 UIProgressView 栏
我想在我的应用程序中实现一个进度条。发生的过程是应用程序将一个目录复制到 iOS 文档目录中。通常需要 7-10 秒(iPhone 4 测试)。我对进度条的理解是你在事情发生时更新进度条。但是根据目录
javascript - 交互式 JavaScript 栏
我正在寻找一种创建交互式子弹图的方法，它允许用户单击图中的任意位置并设置一个标记，然后根据该标记所在的位置计算一些简单的值。例如，我希望它看起来类似于: http://www.usrecordings
html - 普通和移动浏览器中图片后面的 Div 栏
我目前在一个网站上工作，我有一张人的照片。在图片的右侧，我想要名称和描述。名称应与描述具有不同的背景。我上传了一张它应该是什么样子的图片:http://www.tiikoni.com/tis/view
css - 试图居中顶部 DIV 栏
我将 div 栏设置为不滚动，因此它将始终显示在网站顶部。在这个栏内，我有另一个 div 框，里面有两个按钮，它们向右浮动，所以它们总是在右上角。问题是我希望按钮居中于页面的右上角而不是右上角。相反
css - 样式化

首页

博学

6Ren·AI

商城

javascript - 使用 fullPage.js 定位导航栏