导航栏定位使用fullPage.js

时间：2017-03-05 03:39:25

标签： javascript html fullpage.js

我的应用使用fullPage.js。为了让我的导航栏在滚动后工作，我不得不在我的html部分添加这段代码：

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

</style>

没有它，当我向下滚动时，导航栏中的按钮/链接无法点击。不幸的是，添加了这些代码，我的导航栏的排列完全没有问题。有什么我可以做的，以便＆＃34;定位固定＆＃34;不会破坏我的安排吗？

<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;
}

1 个答案:

答案 0 :(得分：1)

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

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

</style>
相关问题
最新问题