Javascript 如何创建滚动后固定在顶部的粘性导航栏

我正在尝试创建一个导航栏，当站点第一次加载时，它会出现在可查看页面的底部，然后当用户向下滚动时，导航栏会向上滚动，最终固定在顶部。我使用的是Bootstrap，就像这个网站一样，但我不知道这个网站是怎么做到的。有什么帮助吗

以下是我尝试模拟的导航栏站点：

以下是我的导航html和css代码：

HTML:

注意（2015）：下面的问题和答案都适用于旧的、弃用的。

这种使元素“粘性”的特性内置于Twitter的引导程序中，称为。您只需添加以下内容：

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

---

其中

77px

是我粘贴组件的高度。

这对我来说非常有用。别忘了在导航栏原来的位置放一个filler div，否则每次固定/取消固定时内容都会跳转

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

---

我在寻找同样的东西。我曾读到Bootstrap3.0中提供了这一功能，但实际上我并没有实现它。这就是我想到的，效果很好。非常简单的jQuery和Javascript

这里是可以玩的JSFIDLE

该解决方案与web和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>

现在，只需添加JavaScript，即可根据滚动位置添加和删除修复类

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

$（文档）.ready（函数（）{
//更改下面的整数以匹配我调用的上div的高度
//banner.只需将1添加到最后一个number.console.log（$（window.scrollTop（））
//要准确确定导航时的滚动位置
//bar或div之类的。我为你在console.log中卡住了。只要在
//你知道这个职位。
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>550）{
$（'nav#u bar'）.addClass（'navbar-fixed-top'）；
}
if（$（窗口）.scrollTop（）<551）{
$（'nav#u bar'）。removeClass（'navbar-fixed-top'）；
}
});
});

引导程序4-更新2020

Bootstrap 4中不再存在粘贴插件，但现在大多数浏览器都支持

position:sticky

，该插件可用于创建sticky after scoll导航栏。Bootstrap 4包括用于此的

sticky top

类

Bootstrap 3-原始答案

下面是一个Bootstrap3示例，它不需要额外的jQuery。。它使用Bootstrap3中包含的

粘贴

插件，但自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>

..


..

---

工作演示/模板：

您可以使用

位置：sticky

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

---

不过，#navbar应该是body的直接子对象。

我发现这个简单的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');
        }
    });
});

$（文档）.ready（函数（）
{
var-navbar=$（“#navbar”）；
导航栏后（“”）；
var afternavbar=$（“#更多div”）；
高于导航栏的变量=$（“#高于导航栏”）；
$（窗口）.on（'scroll'，function（）
{
如果（$（窗口）.scrollTop（）>高于NavBar.height（））
{
navbar.addClass（'navbar-fixed-top'）；
afternavbar.removeClass（“隐藏”）；
}
其他的
{
navbar.removeClass（'navbar-fixed-top'）；
afternavbar.addClass（'hidden'）；
}
});
});

//html格式

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

下面是要玩的JSFIDLE：-

编辑： 如果您只想将此代码应用于移动设备，您可以使用：

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

var newWindowWidth=$（window.width（）；
如果（新窗口宽度<481）{
//把代码放在里面。。。
}

在回答Shubham Patwa时：这样，当“导航栏固定顶部”类应用时，页面就会“跳跃”。这是因为#mainnav在文档的DOM流中来回传递。如果页面有一个“临界高度”，在固定和非固定的主导航位置之间跳跃，这可能会导致丑陋的用户体验

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

我以这种方式修改了代码，似乎效果很好（不是像素完美，但很好）：

使用引导粘贴：

/*注意：尝试删除以下行以查看CSS定位的效果*/
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}

引导示例
引导粘贴示例
固定（粘性）滚动导航条
滚动此页面以查看导航栏在data spy=“粘贴”下的行为

滚动指定数量的像素后，导航栏将附加到页面顶部







一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动

对于Bootstrap 4，为此发布了一个新类。根据用途：

将该类应用于粘性顶部

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

。。。

有关更多导航栏位置选项。

---

另外，请记住

位置：粘性，因此，如果您需要支持较旧的浏览器，这可能不是您的最佳解决方案。
它跳得太多，看起来不太好看+1，而且我还创建了一个非硬编码版本，它也需要ca
<nav class="navbar navbar-default" id="mainnav">
<nav>

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

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

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

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