web-dev-qa-db-ja.com

CSSでスクロールするときにナビゲーションバーを上部に貼り付ける

ナビゲーションバーをページとともに移動させようとしていますが、ユーザーが下にスクロールすると上部に固定されます。誰でも例や方法を提供できますか？とても有難い。 （私は他の言語では絶望的です）。 CSSスティッキーを使用してみましたが、うまくいきませんでした。

<div class="headercss">
    <div class="headerlogo"></div>
    <div class="nav">
        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>
    </div>
</div>


/* www..com
Blinx Service
Created by Pierre Chedraoui
(c) Copyright 2015
*/

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: relative;
}

.nav {
    width: auto;
    height: 70px;
    background-color: #272727;
    position: relative;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:100%;
    overflow: hidden;
}


li {
    float: left;
    width:25%;
    min-width: 243px;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    height: 68px;
    min-width: 243px;
    font-size: 12px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 2pt;
    line-height: 200%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}
htmlcssscrollnavsticky
44
Pierre
$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});
html, body {
        height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
        top: 0;
        position: relative;
    height: 200px;
    background-color: green;
}

#banner {
        width: 100%;
        height: 273px;
    background-color: gray;
        overflow: hidden;
}

#nav_bar {
        border: 0;
        background-color: #202020;
        border-radius: 0px;
        margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
        display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
        padding: 0 15.5px;
        color: #3498db;
        text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
47
Yash Thakur

.nav cssブロックに追加します

position: fixed

そしてそれは動作します

14
TheLovelySausage

これが誰かを助けることを願っています。 jsによるnavオフセットを決定し、スティッキーポジションcssをnavに適用します。

ただし、最初に、スタイルシートでスタイルを定義します。

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

次に、jQueryを使用して条件付きでそのクラスをナビゲーションに適用します。

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset().top;

  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky'); 
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});
12
Amar Pratap

CSS：

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
}

属性position: fixedはスタックしたままにしますが、他のコンテンツはスクロール可能です。 width:100%を設定して、右いっぱいまで埋めることを忘れないでください。

例

4
Ilia Rostovtsev

Headercssの位置を固定します。

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
    top:0
}

次に、コンテンツコンテナに320pxのパディングトップを設定します。これにより、ヘッダーの背後に配置されなくなります。

2
Psygnosis

CSSを使用するには、メニューを2回作成する必要があります。これは理想的ではありませんが、メニューが最上位になったらメニューのデザインを変えることができ、CSS以外にjqueryがありません。 DIVの例を次に示します（もちろん、必要に応じてNAVに変更できます）。

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

そして、次のCSSを使用します。

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

ここにあなたが見るためのフィドルがあります： https://jsfiddle.net/brghtk4z/1/

1
iMac Ange

ブートストラップを使用することをお勧めします。 http://getbootstrap.com/ 。このアプローチは非常に簡単で軽量です。

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-fixed-top">
            <li><a href="#home"> <br>BLINK</a></li>
                <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
                <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
                <li><a href="#about"><br>ABOUT US</a></li>
            </ul>
        </div>
    </div>
</div>

Bootstrapをプロジェクトに含める必要があります。これには、必要なスクリプトとスタイルが含まれます。次に、クラスを「navbar-fixed-top」と呼ぶだけです。これでうまくいきます。上記の例を参照してください

0
Swinkaran
/* Add css in your style */


.sticky-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;
}


/* and use this javascript code: */

$(document).ready(function() {

  $(window).scroll(function () {
    if ($(window).scrollTop() > ) {
      $('.headercss').addClass('sticky-header');
    } else{
      $('.headercss').removeClass('sticky-header');
    }
  });
});
0
Sanjay Jadon

単にこのコードを呼び出して、スティッキーなnavbarのnaveバーに呼び出します

  .sticky {
        /*css for  stickey navbar*/
        position: sticky;
        top: 0; 
        z-index: 100;
    }
0
Hamza Chaudhry

ヘッダーをスティッキーにするには、最初に位置を指定する必要があります。 cssのヘッダー用。その後、幅や高さなどを調整できます。この記事に従うことを強くお勧めします。 スティッキーWebサイトヘッダーの作成方法

ヘッダーを回避してスティッキーにするためのコードもあります。

header { 
   position: fixed; 
   right: 0; 
   left: 0; 
   z-index: 999;
}

上記のこのコードは、styles.cssファイル内に配置されます。

0
Zahid Iqbal