Сделайте навигационную панель сверху до прокрутки css

Ответ 1

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

Ответ 2

добавьте в свой .nav css блок

position: fixed

и он будет работать

Ответ 3

Надеюсь, это поможет кому-то. Определите смещение nav через js, а затем примените липкое положение css для навигации:

Но сначала мы определим стили в таблице стилей, например.

.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();
  });
});

Ответ 4

CSS

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

Атрибут position: fixed сохранит его, а другой контент будет прокручиваться. Не забудьте установить width:100%, чтобы он полностью заполнился вправо.

Пример

Ответ 5

Установите позицию headercss фиксированной.

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

Затем дайте контейнеру содержимого 320px padding-top, поэтому он не отстает от заголовка.

Ответ 6

Вы можете сделать это с помощью CSS, только создав свое меню дважды. Это не идеально, но это дает вам возможность иметь другой дизайн для меню, когда он сверху, и у вас будет не что иное, как 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/

Ответ 7

Просто используйте свойство z-index CSS, как описано в наивысшем понравившемся ответе, и панель навигации будет придерживаться вершины.

Пример:

<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 */
}

Ответ 8

/* 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');
    }
  });
});

Ответ 9

Я бы рекомендовал использовать Bootstrap. 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". Это сделает трюк. См. Пример выше

Ответ 10

Просто позвоните по этому коду и вызовите его на панель nave для липкой навигации

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

Ответ 11

Чтобы сделать заголовок липким, сначала вам нужно указать позицию: fixed; для заголовка в css. Затем вы можете настроить ширину и высоту и т.д. Я бы настоятельно рекомендовал следовать этой статье. Как создать липкий заголовок веб-сайта

Вот код, а также для работы над заголовком, чтобы сделать его липким.

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

Этот код, приведенный выше, войдет в ваш файл styles.css.