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

标签 javascript html fullpage.js

我的应用程序使用 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/

上一篇：javascript - 这个 javascript 没有从数据库动态获取数据有什么问题？

下一篇：javascript - 如果元素丢失则忽略的数组

相关文章：

javascript - yarn 遇到^(插入符号)时如何工作？

javascript - 如何在 WordPress 中获取子主题 url？

javascript - JS 图像调整大小兼容 fullPage.js

javascript - 如何让动画在视口(viewport)中启动一次

javascript - Angular JS/IONIC 读取 JSON 文件

Javascript 选项卡，将事件类添加到元素

html - 如何更改网站各部分之间固定标题的内容

html - 如何将 h1 放在同一行和导航中间

html - Safari 浏览器中的输入字段 : border + uppercase text

jquery - HTML-CSS : Strange fade in at load

©2024 IT工具网  联系我们