web-dev-qa-db-fra.com

Faites en sorte que la barre de navigation reste en haut lorsque vous faites défiler avec css

J'essaie de faire bouger ma barre de navigation avec la page mais de rester en haut si l'utilisateur fait défiler l'écran Quelqu'un pourrait-il donner des exemples ou comment? Très appréciée. (Je suis sans espoir dans une autre langue). J'ai essayé d'utiliser le css collant mais cela n'a pas fonctionné.

<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
43
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>

46
Yash Thakur

ajouter à votre css .nav bloquer le

position: fixed

et ça va marcher

14
Trent

J'espère que cela peut aider quelqu'un. Déterminez le décalage de nav par le biais de js puis appliquez le css position collante au nav:

Mais d'abord, nous allons définir les styles dans la feuille de style, comme suit.

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

Ensuite, nous appliquerons cette classe à la navigation de manière conditionnelle avec 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();
  });
});
11
Amar Pratap

CSS:

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

L'attribut position: fixed le maintiendra bloqué, tandis que les autres contenus pourront défiler. N'oubliez pas de définir width:100% pour le remplir complètement à droite.

Exemple

4
Ilia Rostovtsev

Il suffit d’utiliser la propriété CSS z-index telle que décrite dans la réponse préférée la plus élevée et la barre de navigation reste en haut.

Exemple :

<div class="navigation">
 <nav>
   <ul>
    <li>Home</li>
    <li>Contact</li>
   </ul>
 </nav>


.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;
   /* z-index works pretty much like a layer:
   the higher the z-index value, the greater
   it will allow the navigation tag to stay on top
   of other tags */
}
4
user5837472

Donne la position de tête fixe.

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

Donnez ensuite au conteneur de contenu un padding-top de 320px afin qu’il ne passe pas derrière l’en-tête.

2
Psygnosis

Vous pouvez le faire avec CSS uniquement en créant votre menu deux fois. Ce n’est pas idéal mais cela vous donne l’opportunité d’avoir un design différent pour le menu une fois qu’il est au-dessus et vous n’avez rien d’autre que CSS, pas de jquery… NAV si vous préférez):

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

Et puis avoir le CSS suivant:

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

Voici un violon à voir: https://jsfiddle.net/brghtk4z/1/

1
iMac Ange

Je recommanderais d'utiliser Bootstrap. http://getbootstrap.com/ . Cette approche est très simple et légère.

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

Vous devez inclure le Bootstrap dans votre projet, qui inclura les scripts et les styles nécessaires. Ensuite, appelez simplement la classe 'navbar-fixed-top'. Ça fera l'affaire. Voir l'exemple ci-dessus

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

Appelez simplement ce code et appelez-le sur votre barre de nef pour obtenir une barre de navigation collante.

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

Pour rendre l’en-tête collant, vous devez d’abord donner la position: fixed; pour en-tête en css. Ensuite, vous pouvez ajuster la largeur et la hauteur, etc. Je vous recommande vivement de suivre cet article. Comment créer un en-tête de site Web collant

Voici du code pour contourner l’en-tête pour le rendre collant.

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

Ce code ci-dessus ira dans votre fichier styles.css.

0
Zahid Iqbal