Question

我试图在首次加载网站时创建一个出现在可查看页面底部的导航栏，然后当用户向下滚动时，导航栏向上滚动，最终固定到顶部。我正在使用Bootstrap，就像这个网站一样，但我无法弄清楚这个网站是如何做到的。有什么帮助吗？

以下是我试图模仿导航栏的网站：http://www.blastprocessor.co.uk/

这是我的导航html和css代码：

HTML：

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

这是我的CSS：

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}

Answer 1

我正在寻找同样的事情。我曾经读过这个在Bootstrap 3.0中可用，但我实际上没有运气实现它。这就是我提出的，它很有效。非常简单的jQuery和Javascript。

这是JSFiddle来玩... http://jsfiddle.net/CriddleCraddle/Wj9dD/

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

这是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 dive, 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');
    }
  });
});

Answer 2

注意（2015）：以下问题和答案都适用于旧的，已弃用version 2.x of Twitter Bootstrap。

制作和元素“粘性”的这个功能内置于Twitter的Bootstrap中，它被称为Affix。您所要做的就是添加：

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

围绕您的标记，不要忘记加载Bootstrap的JS文件，如manual中所述。数据属性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是我附加组件的高度。

Answer 3

//在html中

GetDataForNextComboBox

//添加jquery

app.post('/api/photo',function(req,res){
  if(done==true){
    photoName = req.files.userPhoto.name;
    photoName = encodeURIComponent(photoName);
    res.redirect('../course?img=' + photoName);
  }
});

以下是jsfiddle： - http://jsfiddle.net/shubhampatwa/46ovg69z/

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

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

Answer 4

这是一个不需要额外jQuery的Bootstrap 3示例..它使用Bootstrap 3中包含的Affix插件，但导航栏标记自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

Answer 5

这对我很有用。不要忘记在导航栏曾经存在的地方放置一个填充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');
        }
    });
}

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

Answer 7

对于Bootstrap 4，为此发布了一个新类。根据实用工具docs：

将类粘贴在顶部。

Set @query = 

'Select 
       ##pvt1.Dt,
       ##pvt1.Account,' + @cols1q + ', ' + @cols2v +

' From ##pvt1 Inner Join
              ##pvt2 On ##pvt1.Account = ##pvt2.Account
Order By ##pvt1.Account'

EXECUTE(@query)

有关导航栏位置的其他选项，visit here。另外，请记住，并非每种浏览器都支持Drop Table #assets Drop Table #assets2 Drop Table ##pvt1 Drop Table ##pvt2 Drop Table #tbl，因此如果您需要支持旧版浏览器，这可能不是最佳解决方案。

Answer 8

您可以使用position: sticky

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

#navbar应该是身体的直接孩子。

Answer 9

回答Shubham Patwa：这样一来，这个页面就是＆＃34;跳跃＆＃34;班级＆＃34; navbar-fixed-top＆＃34;适用。这是因为#mainnav会进出文档的DOM流。如果页面具有＆＃34;临界高度＆＃34;，在固定和未固定的#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');
   }
});

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

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

10 个答案: