Как создать липкую навигационную панель, которая фиксируется на вершине после прокрутки

Ответ 1

Я искал эту самую вещь. Я читал, что это доступно в Bootstrap 3.0, но мне не повезло в его реализации. Это то, что я придумал, и это прекрасно работает. Очень простые jQuery и Javascript.

Вот JSFiddle, с которым можно поиграть... http://jsfiddle.net/CriddleCraddle/Wj9dD/

Решение очень похоже на другие решения в сети и StackOverflow. Если вы не нашли это полезным, найдите то, что вам нужно. Удачи!

Вот HTML...

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

Вот CSS...

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

//the below css are for the links, not needed for sticky nav
.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;
}

Теперь просто добавьте javacript для добавления и удаления класса исправлений в зависимости от положения прокрутки.

$(document).ready(function() {
  //change the integers below to match the height of your upper div, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});

Ответ 2

Примечание (2015): оба вопроса и ответ ниже относятся к устаревшей устаревшей версии 2.x Twitter Bootstrap.

Эта особенность создания и элемента "липкий" встроена в загрузочную ленту Twitter и называется Affix. Все, что вам нужно сделать, это добавить:

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

вокруг вашего тега и не забудьте загрузить файлы Bootstrap JS, как описано в руководстве. Атрибут data offset-top сообщает, сколько пикселей прокручивается страница (сверху), чтобы зафиксировать компонент меню. Обычно это просто место в верхней части страницы.

Примечание: вам придется позаботиться о пропущенном месте, когда меню будет исправлено. Исправление означает вырезать его из слоя страницы и вставить в другой слой, который не прокручивается. Я делаю следующее:

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

где 77px - высота моего прикрепленного компонента.

Ответ 3

//в html

<nav class="navbar navbar-default" id="mainnav">
<nav>

//добавить в jquery

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  console.log(navpos.top);
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
       $('#mainnav').addClass('navbar-fixed-top');
       }
       else {
         $('#mainnav').removeClass('navbar-fixed-top');
       }
    });
});

Вот jsfiddle, чтобы поиграть: - http://jsfiddle.net/shubhampatwa/46ovg69z/

EDIT: если вы хотите применить этот код только для мобильных устройств, вы можете использовать:

   var newWindowWidth = $(window).width();
    if (newWindowWidth < 481) {
        //Place code inside it...
       }

Ответ 4

Здесь пример Bootstrap 3, который не требует дополнительного jQuery.. он использует плагин Affix, включенный в Bootstrap 3, но разметка navbar изменилась с BS2...

<!-- Content Above Nav -->
<header class="masthead">

</header>           


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
            ..
          </li>
          <li>
            ..
          </li>
        </ul>
      </div>        
    </div>
  </div><!-- /.navbar -->
</div>

Рабочая демонстрация/шаблон: http://bootply.com/69848

Ответ 5

Это отлично поработало для меня. Не забудьте поместить наполнитель-наполнитель там, где раньше была панель навигации, или содержимое будет пересказывать каждый раз, когда оно будет зафиксировано/нефиксировано.

function setSkrollr(){
    var objDistance = $navbar.offset().top;
    $(window).scroll(function() {
        var myDistance = $(window).scrollTop();
        if (myDistance > objDistance){
            $navbar.addClass('navbar-fixed-top');
        }
        if (objDistance > myDistance){
            $navbar.removeClass('navbar-fixed-top');
        }
    });
}

Ответ 6

Использовать Bootstrap Affix:

/* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>

Ответ 7

Для Bootstrap 4 был выпущен новый класс для этого. В соответствии с документами утилит:

Примените класс липкий верх.

<div class="sticky-top">...</div>

Для дальнейших опций положения navbar, посетите здесь. Также имейте в виду, что position: sticky; не поддерживается во всех браузерах, поэтому это может быть не лучшим решением для вас, если вам нужна поддержка старых браузеров.

Ответ 8

Вы можете использовать position: sticky

#navbar {
  position: sticky;
  top: 0px;
}

#navbar должен быть прямым дочерним элементом тела.

Ответ 9

В ответ на Shubham Patwa: Таким образом, страница будет "прыгать" в скором времени, когда применяется класс "navbar-fixed-top". Это потому, что #mainnav выбрасывается из потока DOM документа. Это может привести к уродливому UX, если страница имеет "критическую высоту", прыгая между фиксированной и нефиксированной позицией #mainnav.

Я изменил код таким образом, который, кажется, работает нормально (не идеальный пиксель, но отлично):

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  var navheight = $('#mainnav').outerHeight();

$(window).bind('scroll', function() {
  if ($(window).scrollTop() > navpos.top) {
   $('#mainnav').addClass('navbar-fixed-top');
   $('body').css('marginTop',navheight);
   }
   else {
     $('#mainnav').removeClass('navbar-fixed-top');
     $('body').css('marginTop','0');
   }
});

Ответ 10

Я нашел этот простой фрагмент javascript очень полезным.

$(document).ready(function()
{
    var navbar = $('#navbar');

    navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
    var afternavbar = $('#more-div');

    var abovenavbar = $('#above-navbar');

    $(window).on('scroll', function()
    {
        if ($(window).scrollTop() > abovenavbar.height())
        {
            navbar.addClass('navbar-fixed-top');
            afternavbar.removeClass('hidden');
        }
        else
        {
            navbar.removeClass('navbar-fixed-top');
            afternavbar.addClass('hidden');
        }
    });
});