it-swarm.com.de

Wenn Sie mit css scrollen, wird eine Navigationsleiste oben angezeigt

Ich versuche, meine Navigationsleiste mit der Seite verschieben zu lassen, bleibt aber oben, wenn der Benutzer einen Bildlauf nach unten durchführt. Könnte irgendjemand Beispiele oder wie? Sehr geschätzt (Ich bin in keiner anderen Sprache hoffnungslos). Ich habe versucht, das CSS zu verwenden, aber es hat nicht funktioniert.

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

fügen Sie Ihrem .nav CSS-Block die hinzu

position: fixed

und es wird funktionieren

14
Trent

Ich hoffe das kann jemandem helfen. Bestimmen Sie den Nav-Versatz durch js und wenden Sie anschließend sticky position css für das nav an:

Zuerst definieren wir jedoch die Stile im Stylesheet.

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

Dann werden wir diese Klasse mit jQuery bedingt auf die Navigation anwenden.

$(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;
}

Das Attribut position: fixed hält es fest, während der andere Inhalt scrollbar ist. Vergessen Sie nicht, width:100% einzustellen, damit es ganz nach rechts ausgefüllt wird.

Beispiel

4
Ilia Rostovtsev

Verwenden Sie einfach die z-index-CSS-Eigenschaft, wie in der Antwort mit der höchsten Antwort beschrieben, und die Navigationsleiste bleibt oben.

Beispiel :

<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

Kopfzeilenposition fixiert.

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

Dann geben Sie dem Inhaltscontainer ein 320px-Aufsatz, damit er nicht hinter die Kopfzeile gerät.

2
Psygnosis

Sie können dies nur mit CSS tun, indem Sie Ihr Menü zweimal erstellen. Es ist nicht ideal, aber es gibt Ihnen die Möglichkeit, ein anderes Design für das Menü zu haben, wenn es oben ist, und Sie haben nichts anderes als CSS, keine Jquery. Hier ist ein Beispiel mit DIV (Sie können es natürlich ändern NAV wenn Sie bevorzugen):

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

Und dann noch folgendes 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;
 }

Hier sehen Sie eine Geige: https://jsfiddle.net/brghtk4z/1/

1
iMac Ange

Ich würde empfehlen, Bootstrap zu verwenden. http://getbootstrap.com/ . Dieser Ansatz ist sehr einfach und leicht.

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

Sie müssen den Bootstrap in Ihr Projekt einfügen, das die erforderlichen Skripts und Stile enthält. Dann nennen Sie einfach die Klasse "navbar-fixed-top". Das wird den Trick tun. Siehe obiges Beispiel

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

Rufen Sie einfach diesen Code an und rufen Sie ihn für Ihre Navigationsleiste auf

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

Damit der Header klebrig wird, müssen Sie zunächst die Position angeben: Fixed; für Header in CSS Dann können Sie Breite und Höhe anpassen. Ich würde dringend empfehlen, diesem Artikel zu folgen. So erstellen Sie einen sticky Website-Header

Hier ist auch Code, um den Header zu umgehen, damit er klebrig wird.

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

Dieser Code wird in Ihre styles.css-Datei eingefügt.

0
Zahid Iqbal