ナビゲーションバーがページトップまで上がると、止まります。
head部CSS ソース：ソースの上で右クリックしてコピーしてください。「雛形.html」の</head>の1行上に貼り付けます。 body {position: relative; } .affix {top:0;width: 100%;z-index: 99 !important;} .navbar {margin-bottom: 0px;} .affix ~ .container-fluid {position: relative;top: 50px;} #section41 {padding-top:50px;height:300px;} #section42 {padding-top:50px;height:300px;}
body部HTML ソース：ソースの上で右クリックしてコピーしてください。「雛形.html」の<body>の1行下に貼り付けます。 <body data-spy="scroll" data-target=".navbar" data-offset="50"> <div class="container" style="height:150px;"> <h2>Page Top Title</h2> <h5>Subtitle</h5> <p>ヘッダーのコメント</p> </div> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="147"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a></li> <li><a href="#section42">Section 4-2</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid bg-info"> <div class="container"> <h3>Section 1</h3> <p>ここが1番目のセクション</p> </div> </div> <div id="section2" class="container-fluid bg-danger"> <div class="container"> <h3>Section 2</h3> <p>ここが2番目にセクション</p> </div> </div> <div id="section3" class="container-fluid bg-gr"> <div class="container"> <h3>Section 3</h3> <p>ここが3番目のセクション</p> </div> </div> <div id="section41" class="container-fluid bg-danger"> <div class="container"> <h3>Section 4 Submenu 1</h3> <p>ここが4-1番目のセクション</p> </div> </div> <div id="section42" class="container-fluid bg-warning"> <div class="container"> <h3>Section 4 Submenu 2</h3> <p>ここが4-2番目のセクション</p> </div> </div>
ここが4-2番目のセクション