メニューバーをスティッキーにするには？

私は私のウェブページの上部に次のコードを持っている：メニューバーをスティッキーにするには？

<body> <div class="agile-main">  <div class="menu-wrap" id="style-1">   <nav class="top-nav"> 
       <ul class="icon-list"> 
        <li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home </a></li> 
        <li><a href="about.html"><i class="glyphicon glyphicon-info-sign"></i> About </a></li> 
        <li><a href="property.html"><i class="glyphicon glyphicon-briefcase"></i> properties </a></li> 
        <li><a href="agents.html"><i class="glyphicon glyphicon-eye-open"></i> Agents </a></li> 
        <li><a href="gallery.html"><i class="glyphicon glyphicon-picture"></i> Gallery</a></li> 
        <li><a class="active" href="contact.html"><i class="glyphicon glyphicon-envelope"></i> Contact </a></li> 
       </ul>   </nav>   <button class="close-button" id="close-button">C</button>  </div>   <div class="content-wrap">   <div class="header"> 
       <div class="menu-icon"> 
        <button class="menu-button" id="open-button">O</button> 
       </div> 
       <div class="logo"> 
        <h2><a href="main.html">FE</a></h2> 
       </div> 
       <div class="clearfix"> </div>   </div> 
         <div class="content">   Page content goes here   </div> 
        </body>

私は、ナビゲーションバーがスティッキー作りたい - 下向きページのスクロールなどの上に滞在、私はスタイルのスタイル= "オーバーフローを適用しました：非表示;位置：固定;上部：0;幅：100％; " をnavタグに入れてもidがうまくいかなかったので、他のトップdivタグにも適用しました。ページ全体がフリーズするか、動作しません。 nav barをスティッキーにするには？

ありがとうございます。

出典

2017-09-09 bodesam

'＃スタイル-1 {位置を試してください。固定; z屈折率：10。トップ：0; backface-visibility：hidden; -webkit-backface-visibility：hidden;} ' –

Iveはさまざまなコードを試しましたが、まだ動作しませんでした。実際にはテンプレートはオンラインでダウンロードでき、ここでダウンロード/プレビューすることができます：https://w3layouts.com/fortune-estates-mobile-app-flat-bootstrap-responsive-web-template/ – bodesam

position: fixedおよびtop: 0は、固定ヘッダーを達成するために必要な唯一のCSSプロパティです。以下のコードスニペットを実行してこれを観察します。

.icon-list { 
 
    list-style: none; 
 
} 
 

 
.icon-list li { 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 

 
.menu-wrap { 
 
    clear: both; 
 
} 
 

 
.top-nav { 
 
    position: fixed; 
 
    top: 0; 
 
}

<body> 
 
    <div class="agile-main"> 
 
     <div class="menu-wrap" id="style-1"> 
 
      <nav class="top-nav"> 
 
       <ul class="icon-list"> 
 
        <li><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home </a></li> 
 
        <li><a href="about.html"><i class="glyphicon glyphicon-info-sign"></i> About </a></li> 
 
        <li><a href="property.html"><i class="glyphicon glyphicon-briefcase"></i> properties </a></li> 
 
        <li><a href="agents.html"><i class="glyphicon glyphicon-eye-open"></i> Agents </a></li> 
 
        <li><a href="gallery.html"><i class="glyphicon glyphicon-picture"></i> Gallery</a></li> 
 
        <li><a class="active" href="contact.html"><i class="glyphicon glyphicon-envelope"></i> Contact </a></li> 
 
       </ul> 
 
      </nav> 
 
      <button class="close-button" id="close-button">C</button> 
 
     </div> 
 
     <div class="content-wrap"> 
 
      <div class="header"> 
 
       <div class="menu-icon"> 
 
        <button class="menu-button" id="open-button">O</button> 
 
       </div> 
 
       <div class="logo"> 
 
        <h2><a href="main.html">FE</a></h2> 
 
       </div> 
 
       <div class="clearfix"> </div> 
 
      </div> 
 
      <div class="content"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum porta ex eget auctor. Quisque varius magna sed auctor placerat. Maecenas quis volutpat elit. Vivamus sit amet turpis lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla egestas id libero at accumsan. In iaculis quam ligula, in consectetur augue porttitor nec. Quisque pharetra vel magna vitae tempor. Suspendisse at libero ut lectus consectetur viverra. Morbi pellentesque lectus ex, ut auctor lacus condimentum eu. Morbi vel pulvinar ex.</p> 
 
       <p>Duis ornare fermentum lacus sed rutrum. Sed id iaculis mi, at imperdiet quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas finibus interdum varius. Nunc hendrerit consectetur lacus, sed tempor velit fermentum non. Cras molestie est non neque pharetra, sed auctor elit iaculis. Sed eget massa efficitur, finibus augue at, blandit nulla. Praesent sed cursus ipsum. Duis tincidunt massa in est interdum porttitor. Pellentesque eu dignissim tortor. Nunc non ligula odio. Sed vel finibus ante. Cras vitae ipsum non sapien tincidunt fringilla at et dui. Suspendisse sapien ligula, varius in nisi faucibus, luctus ullamcorper justo. Sed dignissim nec nulla ut vestibulum. Praesent et purus vitae dolor malesuada vestibulum quis et elit.</p> 
 
       <p>Quisque augue justo, imperdiet ut nunc ut, aliquet tincidunt metus. Nam laoreet sapien a tortor faucibus cursus. Curabitur euismod ornare dapibus. Nullam ac orci vel risus consequat vehicula condimentum pharetra lacus. Praesent pulvinar lectus dignissim urna molestie porta. Cras facilisis, nisi nec auctor commodo, nulla nulla consectetur sem, a vehicula metus risus sed ante. Suspendisse sodales justo et velit scelerisque feugiat. Sed libero mauris, placerat et mi non, euismod pretium elit. Aenean mi dui, tincidunt non pretium at, congue eget enim.</p> 
 
       <p>Mauris vulputate sit amet tortor in tempus. Mauris nec leo pellentesque, consectetur dui ut, tristique augue. Quisque eget rutrum orci, in congue nibh. Fusce feugiat tellus ut dolor accumsan, et tempor metus cursus. Donec id dolor massa. Maecenas dui nulla, hendrerit quis dictum sed, elementum aliquam dolor. Vestibulum sit amet posuere risus, ut eleifend augue. Integer nisi dolor, accumsan cursus mauris quis, rutrum tincidunt nisi. Aenean volutpat odio varius mi mollis, ut lacinia diam malesuada. Praesent cursus sem eget lobortis mattis.</p> 
 
       <p>Curabitur ornare condimentum tellus, et eleifend tellus cursus non. Praesent venenatis imperdiet tellus, euismod lacinia tortor. Praesent a magna aliquet, vehicula arcu eu, maximus lacus. Donec bibendum rutrum dignissim. Sed consectetur laoreet nisl, a sodales turpis vestibulum in. Nulla lacinia velit eget maximus vehicula. In libero elit, mattis vel turpis sed, pretium auctor tortor. Quisque non convallis ligula. Curabitur et eros non lectus rutrum gravida. Aenean finibus ante sed neque posuere, non convallis urna faucibus. Nunc congue facilisis urna et bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor bibendum tortor quis varius. Pellentesque bibendum sem vel dolor consequat, id sodales ante scelerisque. Phasellus ornare lobortis tellus a mollis.</p> 
 
       <p>Fusce non nibh convallis, venenatis quam malesuada, cursus lorem. Aliquam nunc enim, auctor sit amet imperdiet id, faucibus vel erat. Proin posuere molestie lorem. Sed non tellus et neque egestas dictum sit amet vel mi. Nunc euismod nulla at scelerisque mollis. Pellentesque enim lectus, dapibus vel molestie ut, iaculis nec ex. Donec ac elementum nisl. Duis elementum eu sem quis iaculis. Vivamus consectetur lectus lectus, quis ultricies est semper ut. Integer ut ultricies dui. Sed ut condimentum urna, sit amet cursus ligula. Donec id enim sed erat semper imperdiet quis eget ex. Maecenas facilisis massa quis molestie auctor. Donec laoreet varius ante, eu malesuada libero tristique eget. Aenean feugiat, nisi sagittis vestibulum mattis, est dolor ultricies eros, non consectetur nibh risus condimentum nunc.</p> 
 
       <p>Vestibulum arcu mauris, laoreet et euismod quis, rhoncus eu diam. Etiam eget commodo tortor. Aliquam vitae dapibus tortor. Morbi nec ex nunc. Ut ullamcorper orci in nisi dignissim, a aliquet nisl placerat. Integer dictum justo ut nulla sollicitudin dictum. Vestibulum in ipsum eu mauris viverra venenatis. Quisque ornare vitae eros vitae scelerisque. Donec in urna sit amet orci dignissim molestie. Etiam sed tellus ac ex feugiat feugiat. In ipsum justo, pellentesque nec mollis sit amet, mollis sed sapien. Mauris mauris est, interdum et sodales at, maximus a est. Proin semper rutrum mi nec viverra. Aenean tempus tellus metus, non rutrum justo malesuada ut.</p> 
 
       <p>Quisque finibus cursus tincidunt. In id lectus interdum turpis rutrum efficitur et nec dui. Etiam luctus sem ex, ut pellentesque ipsum sagittis sed. In id tellus facilisis, sagittis lacus ac, varius mi. Suspendisse ultricies ante in nisi sollicitudin mollis. Donec porta lorem nec massa aliquam semper. Aliquam non ex nisi. Aenean dapibus nisi aliquam erat iaculis, ac rutrum mauris rhoncus. Aenean sed pharetra magna, vel ultrices ipsum. Etiam suscipit nibh justo, sed pharetra lacus pharetra et. Ut posuere lacus tellus, ut egestas tellus ultricies nec. Praesent fermentum enim accumsan ex elementum pharetra.</p> 
 
      </div> 
 
</body>

出典

2017-09-09 08:24:47

/* The navigation bar */ 
 
.navbar { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; /* Set the navbar to fixed position */ 
 
    top: 0; /* Position the navbar at the top of the page */ 
 
    width: 100%; /* Full width */ 
 
} 
 

 
/* Links inside the navbar */ 
 
.navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
/* Main content */ 
 
.main { 
 
    margin-top: 30px; /* Add a top margin to avoid content overlay */ 
 
}

<div class="navbar"> 
 
    <a href="#home">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
</div> 
 

 
<div class="main"> 
 
    <p>Some text some text some text some text..</p> 
 
</div>

出典

2017-09-09 08:29:38

jQuery(window).scroll(function(){ 
 
\t \t \t scrolled_val=jQuery(document).scrollTop().valueOf(); 
 
\t \t \t if(scrolled_val>160){ 
 
\t \t \t \t jQuery("header").addClass("sticky"); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t jQuery("header").removeClass("sticky"); 
 
\t \t \t } 
 
\t \t });

body{height:2000px;} 
 
/* Header */ 
 
header{letter-spacing:1px;padding:15px 0;position:fixed;z-index:999;background-color: rgba(255,255,255,0.9);width:100%;transition:300ms all;box-shadow:0 0 5px #999;} 
 
header.sticky{padding:0;background-color:#fff;} 
 
.brand-logo{float:left;font-family: 'RioGlamour';} 
 
.brand-logo a{color:#333;font-weight:600;} 
 
.brand-logo a h1::first-letter {color: #FF6801;font-weight:800;} 
 
.brand-logo a h1{margin:0;} 
 

 
nav{float:right;font-family: 'Quicksand', sans-serif; } 
 
nav ul{padding:0;margin:0;} 
 
nav ul li{display:inline-block;float:left;font-weight:700;} 
 
nav ul li a{color:#333;padding:10px 15px;font-size:16px;display:block;} 
 
/* Header end */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <header> 
 
\t <div class="container"> 
 
\t \t <div class="brand-logo"> 
 
\t \t \t <a href="#"><h1>Logo</h1></a> 
 
\t \t </div> 
 
\t \t <nav> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t \t <li><a href="#services">Services</a></li> 
 
\t \t \t \t <li><a href="#portfolio">Portfolio</a></li> 
 
\t \t \t \t <li><a href="#contact">Contact</a></li> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </div> 
 
</header> 
 

 
</body>

出典

2017-09-09 08:52:15

メニューバーをスティッキーにするには？

答えて

関連する問題