2016-12-03 11 views
0

誰かが自分のhtmlを見ることができますか?以前は、私のscrollspyは動作していましたが、何が起こったのかわかりません。私は2時間このままでしたが、私はまだそれを働かせることができません。私はどんな急な変化も思い出しません。ブートストラップスクロール機能が動作しませんでした。

<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Nate The Great</title> 

    <link href="https://fonts.googleapis.com/css?family=Bungee|Istok+Web|Lora" rel="stylesheet">  
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="./assets/css/main.css"> 
    <link rel='shortcut icon' type='image/x-icon' href='./assets/img/favicon.ico' /> 

</head> 

<body data-spy="scroll" data-target="#navbar" > 

    <!--Start of Navigation Bar--> 
    <div class="navbar transparent pull-right navbar-fixed-top" id="navigation"> 
     <div class="container-fluid"> 
      <p class="navbar-brand " id="brand"> <img src="./assets/img/profile.jpg" alt="" style="display: inline; margin-right: 3px; border-radius:50%">Nathaniel D Alcedo Jr</p> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button> 
      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#home">Home</a></li> 
        <li><a href="#portfolio">Projects</a></li> 
        <li><a href="#about">About</a></li> 
        <!--<li><a href="https://ndaljr.github.io/blog">Blog</a></li> will workk on this--> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <!--End of Navigation Bar--> 

    <!--Landing Page--> 
    <div id='home'> 
     <h1> 
      Nathaniel D Alcedo Jr, 
     </h1> 

     <h2 >aspiring web developer</h2> 
    </div> 
    <!--End of Landing Page--> 


    <div class="text-center" id="portfolio"> 
     <h1>Projects Finished</h1> 
     <p>Free Code Camp <a href="./calculator"><u>Calculator</u></a></p> 

    </div> 

    <div class="pull-left" id="about"> 
     <h1>A little about me</h1> 
     <p> 
      Hello there! As the title suggests, I am an aspiring web developer. 
      I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck 
      around on the computer. It ranges from making mock websites to thinking of my own implementations 
      of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.<br><br> 
      My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby! 
      It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently 
      doing Free Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to 
      look for a job in this wonderful field we call software development. 
      </p> 

    </div> 

    <!--Start ofFooter Bar--> 
    <!-- 
    <footer class="footer pull-left navbar-fixed-bottom"> TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-2"> 
        <p>Copyright &copy Nathaniel</p> 
       </div> 
      </div> 
     </div> 
    </footer>--> 

    <!--End of Footer Bar--> 
    <script src="./assets/js/jquery-3.1.1.min.js"></script> 
    <script src="./assets/js/bootstrap.min.js"></script> 
    <script src="https://use.fontawesome.com/c1a4d3ec73.js"></script> 
    <script> 
     // This script enalbes the smooth scrolling of pages when clicking links on the Navbar 
     $(function() { 
      $('a[href*="#"]:not([href="#"])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html, body').animate({ 
        scrollTop: target.offset().top}, 1000); 
        return false; 
        } 
       } 
      }); 
     }); 
    </script> 
</body> 

</html> 

答えて

0

あなたは、ナビゲーションバーに.navbar-defaultクラスを適用するだけでなく、現在、それはdata-target="#navbar"だ、data-targetを反映するためにid="navigation"のごIDを変更する必要があります。

**現在、実際のスクロールには十分なコンテンツがないため、例の目的で一般的な高さが設定されています。

実施例:

$(function() { 
 
    $('a[href*="#"]:not([href="#"])').click(function() { 
 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
     if (target.length) { 
 
     $('html, body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
});
.navbar.navbar-default { 
 
    background-color: transparent; 
 
    border: 0; 
 
} 
 
.navbar.navbar-default .navbar-brand span, 
 
.navbar.navbar-default .navbar-brand img { 
 
    display: inline-block; 
 
} 
 
section { 
 
    padding-top: 70px; 
 
    min-height: 750px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body data-spy="scroll" data-target="#navbar"> 
 

 
    <div class="navbar navbar-default navbar-fixed-top" id="navbar"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand"> 
 
      <img src="http://placehold.it/20x20/000" alt=""> <span>Nathaniel D Alcedo Jr</span> 
 
     </a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#home">Home</a> 
 
      </li> 
 
      <li><a href="#portfolio">Projects</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container-fluid"> 
 
    <section id='home'> 
 
     <h1>Nathaniel D Alcedo Jr,</h1> 
 
     <h2>aspiring web developer</h2> 
 
    </section> 
 

 
    <section class="text-center" id="portfolio"> 
 
     <h1>Projects Finished</h1> 
 
     <p>Free Code Camp <a href="./calculator"><u>Calculator</u></a> 
 
     </p> 
 
    </section> 
 

 
    <section id="about"> 
 
     <h1>A little about me</h1> 
 
     <p> 
 
     Hello there! As the title suggests, I am an aspiring web developer. I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck around on the computer. It ranges from making mock websites to thinking of my own implementations 
 
     of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow. 
 
     <br> 
 
     <br>My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby! It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently doing Free 
 
     Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to look for a job in this wonderful field we call software development. 
 
     </p> 
 
    </section> 
 
    </div> 
 

 
    <footer class="navbar navbar-default navbar-fixed-bottom"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <p>Copyright &copy; Nathaniel</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <p>Trademark &reg; Nathaniel</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <p>Something Nathaniel</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <p>Something Nathaniel</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </footer> 
 

 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

をフルページにする
オープン
関連する問題