向下滚动时固定导航

Question

一旦我向下滚动大约300px，我希望我的导航固定在顶部。我也想在导航上略微改变风格。

与本网站完全相同： http://demo.themeruby.com/maple/?home_layout=classic&light_style=1#038;light_style=1/page/2/

这是我复制的一个JSFiddle：http://jsfiddle.net/ianclark001/wELFH/

.nav {
width: 100%;
position: relative;
text-align: center;
background-color: white;
padding: 16px;
display: inline-block;
}

.nav.clone {
width: 100%;
position: fixed;
text-align: center;
background-color: yellow;
padding: 16px;
display: inline-block;
-webkit-transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down nav.clone {
top: 0;
}

我不明白为什么我需要提一下身体..我知道这个网站上有很多这个但是我找不到任何可以解决我的问题的东西。 jQuery的：

$(document).ready(function() {
var $nav = $("nav"),
  $clone = $nav.before($nav.clone().addClass("clone"));

$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 300));
  });
});

Answer 1

检查以下代码段：

说明：首先，我们计算从文档顶部到我们要编辑的项目的距离（在本例中为header）。

例如，我在height 300px的标题前面做了一个div

所以oTop将为300px

然后，如果距离顶部的滚动距离超过300px，则意味着我们到达header所在的部分，因此我们将hfixed类添加到header

之后，在CSS中，我们根据需要设置该类的样式。在此示例中，我已将background-color更改为red。但你可以添加你想要的任何风格

希望它有所帮助。欢呼声

var oTop = $("header").offset().top

$(window).on("scroll", function() {
        
   if($(window).scrollTop() > oTop) {
     $("header").addClass("hfixed")
   } else {
       $("header").removeClass("hfixed")  
   }
          
});

body { 
    margin:0;
    padding:0;
    font-family: Helvetica;
}
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

header {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #eee;
    color: #666;
    padding-left: 20px;
    border-bottom: 5px solid #ddd;
}
.imgbeforeheader {
  height:300px;
}
.content {
    padding: 0 20px 20px;
    background: #fff;
    line-height: 1.5;
    color: #333;
}

header.hfixed { position:fixed;background-color:red;top:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgbeforeheader">

</div>

<header>Header</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</p>
</div>

Answer 2

<强> HTML

<div style="margin:100px">
 <h3>
  Some Content above navbar
 </h3>
</div>
<div class="fixme" style="background-color:gray; padding:20px">
  Header
</div>
<div>
  <h3>Content below navbar</h3>
  <div style="margin:300px">Some Text</div>
</div>

<强> Jquery的

$( document ).ready(function() {
   var fixmeTop = $('.fixme').offset().top;
        //this is offset value from top 
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop(); 
          // this is scroll position from top
        if (currentScroll > fixmeTop) {
            $('.fixme').css({position: 'fixed', top: '0', left: '0',width:'100%'});
            $('.fixme').css('background-color', 'green');
            //here you can change style of navbar once it reaches on top

        } else {
            $('.fixme').css({position: 'static'});
            $('.fixme').css('background-color', 'gray');
            //if navbar is not touching top then again here its style can
            // be changed.    
        }
    });
});

希望这会有所帮助。

Answer 3

我这样做了：

tinymce.init({ selector: 'textarea' });

我的导航器向下跳了一点，这就是这个打击垫的用途。

$(document).ready(function() {

  $(document).on('click', '.btn.modal', function() {
    var title = $('.modal-title'),
        content = $('.modal-body'),
        footer = $('.modal-footer');

    $.post('units.php', { addnew: 'unit' }, function(r) {
      title.html(r.title);
      content.html(r.content);
      footer.html(r.btns);
      $('textarea').tinymce().re‌​move();
      tinymce.init({ selector: 'textarea' });
      $('#modal').modal('show');
    },'json');
  });

});

Answer 4

已编辑：这是我自己的工作粘性导航栏：

＆＃13;

＆＃13;

/* CSS Document */

.affix{position: fixed !important; top:0px; z-index:999; width:100%;}
@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
  .navbar-nav .open .dropdown-menu{position:static; float:none; width:auto; margin-top:0; background-color:transparent; border:0; -webkit-box-shadow:none; box-shadow:none;}
}
@media (max-width: 991px){.dropdown-menu > li > a{color:#FFF; padding-left:15px;}}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {color:#EEE;}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="100">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active m"><a class="menun" href="#">Noticies</a></li>
        <li class="m"><a class="menun" href="#">Agenda</a></li>
        <li class="m"><a class="menui" href="#">e-Butllet&iacute;</a></li> 
        
        <li class="m"><a class="menun" href="#">Entitats</a></li>
        <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Galeria
            <b class="caret"></b></a>
    		<ul class="dropdown-menu">
        		<li><a href="#">Fotos</a></li>
        		<li><a href="#">V&iacute;deos</a></li>
            </ul>
        </li> 
        <li class="m"><a class="menun" href="#">Col&middot;laboren</a></li>
        <li class="m"><a class="menun" href="#">Convocat&ograve;ries</a></li>
        <li class="m"><a class="menun" href="#">Sac solidari</a></li>       
      </ul>
    </div>
  </div>
</nav>

<p>
	<span>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, illum, assumenda impedit harum corrupti vel dignissimos perspiciatis cupiditate tenetur in ipsa modi repellendus ipsum quam est? Excepturi quibusdam qui nesciunt?</span>
	<span>Harum, doloremque, suscipit, asperiores, aut dicta cupiditate sit libero facere nobis optio veritatis quidem cumque delectus. Voluptatem, amet, quidem, quo, molestias voluptate iusto ducimus dolor odit ipsa harum magnam impedit!</span>
	<span>Voluptatem, repudiandae, itaque commodi laboriosam tempore unde veritatis dolorem error ut in illum recusandae veniam eligendi. Ducimus, consectetur, beatae, error nobis asperiores totam dolores ullam temporibus fugiat iusto tempore praesentium.</span>
	<span>Dignissimos, rem, veniam, nobis, magni beatae sunt perspiciatis omnis molestias praesentium vero rerum doloribus id esse voluptatum dolorum fugiat velit debitis culpa enim libero voluptatibus repellat aliquam natus deleniti aspernatur.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, delectus, iusto aut facilis magni ducimus reiciendis repudiandae aliquid quae eveniet commodi aspernatur tenetur assumenda nostrum totam eligendi dolorem? Rem, deserunt!</span>
	<span>Non, eligendi, fuga illum molestias itaque laboriosam aperiam architecto adipisci totam at nobis velit a atque corporis quae sapiente officiis veritatis corrupti accusamus optio! Recusandae, neque voluptate error pariatur sequi.</span>
	<span>Omnis magni nostrum accusantium! Accusantium, eum, eligendi, corporis iusto hic exercitationem laborum unde obcaecati magni alias enim maxime illo culpa beatae reiciendis consectetur ipsam veniam et eveniet atque. Similique, harum.</span>
	<span>Dicta, laudantium, quasi, ipsam asperiores possimus cumque deserunt amet eveniet dolorum sequi ipsum libero sed officia earum soluta ullam ab? Dolor, deleniti beatae natus cumque earum quidem dicta quis nihil.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, eum magnam debitis assumenda voluptate ipsum quibusdam architecto minima ducimus doloribus molestiae amet iusto veritatis est sed ut sequi nulla quo?</span>
	<span>Consequatur, quidem, minus veritatis laboriosam hic nostrum similique rem quam reprehenderit temporibus non aliquam magni repellat blanditiis ipsam provident repudiandae atque quia quae dicta laudantium obcaecati dolores molestias explicabo earum.</span>
	<span>Maiores quas nobis accusamus sit tenetur soluta asperiores ea! Quod, molestiae commodi non ut hic consequuntur cum reiciendis tempora blanditiis laborum praesentium eius quis perspiciatis quisquam nihil quas delectus eaque?</span>
	<span>Quas, porro, ut, magnam a officia amet beatae corporis odit laudantium quis rem reiciendis eius sequi molestias rerum sint itaque debitis at cumque sed dolorem iusto incidunt impedit maiores earum.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque culpa architecto explicabo at delectus sit accusantium ratione dolorem quas fugiat a aut veritatis itaque iure praesentium distinctio quidem cupiditate.</span>
	<span>Asperiores, debitis, ullam, nisi natus inventore corporis tempora odio sit laborum libero mollitia enim fugit quasi numquam temporibus optio sint totam excepturi voluptates accusantium. Alias animi ullam atque maxime facere?</span>
	<span>Et, hic, fugit, enim vitae nisi culpa id explicabo dolorem incidunt accusamus cumque doloremque unde fugiat error eius rerum ducimus beatae architecto quidem dolores iste officia doloribus odio expedita eaque.</span>
	<span>Excepturi, commodi, debitis, doloremque sapiente repellat qui nulla facilis earum deserunt sit modi mollitia amet dicta fuga corporis alias eligendi magni voluptas a et at recusandae culpa ut rerum incidunt!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, voluptatibus, hic, officiis quis explicabo dolorum sunt ea aliquid magnam porro nesciunt cum a vero deserunt beatae adipisci possimus expedita sint.</span>
	<span>Ex, maxime, neque repellat quae itaque tempore aliquam sed mollitia praesentium obcaecati ea quidem ab assumenda dolorum autem veritatis officia totam quia minus omnis doloribus quibusdam voluptate accusamus quis explicabo!</span>
	<span>Iure, velit, porro, modi quod neque commodi recusandae blanditiis omnis similique totam non id officia esse ad placeat tempore corporis. Deleniti, aliquid, repellendus dicta porro est voluptate in asperiores a.</span>
	<span>Autem, officia, quis, mollitia fugiat modi neque tempore sunt veniam inventore porro vel unde rem id in quisquam quibusdam at blanditiis sed soluta quos vero temporibus magni quae. Aperiam, animi.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, perferendis, laboriosam, quasi, blanditiis voluptas omnis iusto mollitia eaque et nobis odio quibusdam ab amet at officiis doloribus dignissimos laudantium rerum.</span>
	<span>Neque, aperiam, quod quaerat esse cupiditate a recusandae ad deserunt perspiciatis error. Sapiente magni exercitationem dolore quis quae ipsam tempora molestias rem quidem reprehenderit! Illo, nemo deleniti deserunt obcaecati commodi.</span>
	<span>Commodi, beatae, consectetur animi corporis aspernatur enim laborum fugiat magni illo laboriosam. Soluta, ad, nihil, quod, quisquam commodi minus voluptatem temporibus iusto nam alias tempore perspiciatis asperiores culpa nostrum officiis.</span>
	<span>Ut, placeat eos quidem quod fugit pariatur necessitatibus. Incidunt, rem, porro, deserunt, repudiandae sapiente veniam rerum architecto doloribus velit tenetur nemo in fugit aliquam. Dolorem assumenda est tempore iusto adipisci.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, a, iure, quibusdam iusto inventore nostrum nam perspiciatis incidunt placeat nesciunt aperiam quis laudantium debitis quas itaque unde natus veniam deserunt!</span>
	<span>Consequatur maxime a magni rerum enim suscipit saepe ducimus impedit. Natus, at sapiente ex doloribus numquam! Doloremque, reprehenderit, ut, natus, quae labore necessitatibus eligendi repudiandae eos accusamus soluta nulla porro.</span>
	<span>Voluptatem, quam porro architecto alias cupiditate doloremque explicabo aut vel et obcaecati quasi totam molestiae atque earum natus quidem repellendus reprehenderit voluptatum quas animi. Pariatur quod aut tempore quae magnam.</span>
	<span>Voluptates, adipisci, cupiditate aliquid neque nostrum sint quisquam sunt debitis est iure dolores cumque ipsa necessitatibus optio alias fugit rerum ex dolorum ad assumenda officia veritatis magnam perferendis laboriosam impedit.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, reprehenderit, praesentium, aliquam dolorem deserunt quia placeat nisi odit iste ut adipisci animi delectus tenetur vero quae quidem aspernatur et cum.</span>
	<span>Beatae, commodi officiis animi laborum quo cumque fugit cupiditate tempore eum nemo fugiat ducimus rem molestias obcaecati earum explicabo aut! Aspernatur hic cupiditate harum aperiam necessitatibus voluptatem obcaecati nostrum quasi.</span>
	<span>Officia, quidem, labore, reprehenderit, expedita ullam beatae soluta modi quisquam perspiciatis eius animi facilis minus dolorem neque ad ipsam alias quia blanditiis iste quaerat eos ex voluptate! Quibusdam, voluptas, esse!</span>
	<span>Inventore, distinctio, quas, tenetur porro ex odio excepturi voluptatibus suscipit a doloremque asperiores cum aliquid numquam consectetur rerum aperiam labore dignissimos autem expedita tempore perferendis corrupti praesentium iure impedit quaerat.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, sequi, facere repellat voluptatibus molestiae nobis recusandae fugiat porro dolorum odit laudantium corrupti dicta fugit delectus eius pariatur repudiandae quisquam vel.</span>
	<span>Velit, iusto ipsum perferendis alias aperiam ipsam totam vitae minima in? Consectetur, optio, provident tempora id magni vitae illo quaerat pariatur rerum minus ex repudiandae numquam architecto laborum accusamus repellendus?</span>
	<span>In, temporibus, accusantium odio eligendi delectus nihil numquam hic sed tempore repellendus blanditiis doloribus veniam dolores magni est culpa mollitia quos inventore quaerat tempora at iusto saepe ab. Illum, neque.</span>
	<span>Ipsam, nulla, est asperiores officia illum dolorem error obcaecati repudiandae quaerat aliquam culpa voluptatem eligendi aperiam fugiat voluptatum tenetur animi explicabo inventore voluptas aspernatur ullam numquam nisi dicta ipsum ducimus!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, repudiandae, blanditiis aliquam voluptates in aliquid placeat doloribus vitae laboriosam nihil maiores voluptate quis dolorem saepe laborum inventore sunt illo assumenda!</span>
	<span>Temporibus, aspernatur, nihil, repellendus totam dolores consequuntur maxime neque earum nesciunt magni vero magnam repudiandae facilis sed distinctio cupiditate placeat veritatis expedita et atque explicabo iusto recusandae quidem soluta sint.</span>
	<span>Quaerat, tempore quam doloremque laborum voluptate perferendis recusandae possimus sit totam at perspiciatis nesciunt tenetur repellat hic culpa quo velit suscipit optio neque voluptatibus voluptatum est ullam atque cumque libero?</span>
	<span>Ut, quisquam, laboriosam, magnam laudantium voluptas dignissimos dolorum nulla consequuntur vel minima enim inventore tempore ipsam beatae odio facilis ab. Et, animi, atque ratione doloribus ullam dignissimos odit natus quos.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, neque, ipsum illum distinctio amet at facilis doloremque facere cupiditate possimus cum delectus voluptatibus consequatur rem illo soluta fuga animi nihil.</span>
	<span>Incidunt, quam, odit quis ratione cumque et commodi accusamus fugit in corporis possimus quo sed officiis? Molestiae, itaque, nam, magnam, aut nulla dicta ex quidem vero reprehenderit voluptatum voluptatibus dolorem!</span>
	<span>Aliquid, vero, error, veritatis dolores cumque veniam atque necessitatibus repellat culpa cupiditate reprehenderit qui aperiam facilis accusamus id fugiat quasi. Earum, ad eius est iste ab dolore fugiat molestias repudiandae!</span>
	<span>Dolorum, voluptatum, laborum quis ullam dignissimos iste asperiores molestiae odio doloremque deserunt molestias necessitatibus officia cumque voluptatem error inventore repudiandae quisquam blanditiis totam debitis tempore vero ratione rem nesciunt similique!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, tempora consequatur dicta quas dolore architecto autem ullam veritatis error quis ut vitae tempore nemo iste eligendi impedit sit deleniti beatae.</span>
	<span>Blanditiis, ut, ad, doloremque accusamus illum aliquam ducimus eligendi possimus repudiandae expedita facilis fugit reprehenderit velit quos accusantium voluptatum excepturi iste mollitia aut magni. Nobis, explicabo at cupiditate nihil culpa?</span>
	<span>Sit, enim velit iure quidem sapiente magnam quia. Sit, voluptas, ad magni illo non atque animi sunt facere repellendus iste beatae at impedit totam nam quidem minima itaque deleniti dolores.</span>
	<span>Optio debitis officia accusantium voluptate accusamus commodi maxime esse vel quas asperiores. Nemo, unde, harum, aliquam, repudiandae voluptatibus ea iste ipsa a dicta modi vero incidunt cumque. Quasi, omnis, tenetur?</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla, deleniti, ducimus animi autem facere assumenda ex ab sed aspernatur facilis maiores expedita. A, non architecto nemo vitae alias dolorum.</span>
	<span>Perspiciatis, minus, doloremque veritatis expedita earum eos excepturi pariatur sequi nemo iusto aspernatur quo numquam! Inventore omnis fuga repudiandae magni neque quas dolorum repellat? Tempore quaerat accusamus consequuntur sequi repudiandae.</span>
	<span>Necessitatibus, assumenda, soluta voluptas quidem similique consequuntur harum adipisci quas quisquam architecto distinctio beatae recusandae obcaecati ducimus fuga numquam aperiam nemo animi. Nam, porro deleniti at rerum vel aliquid dolorum!</span>
	<span>Non cumque veniam sequi laboriosam esse qui ab quam officiis. Reiciendis, sint, minus tempora asperiores cum quisquam sapiente porro itaque perspiciatis? Quia amet porro tempora perferendis eius necessitatibus totam sequi.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, similique provident voluptates itaque sequi quaerat dignissimos fuga repudiandae voluptas corporis dolorem consectetur natus alias facilis nemo sunt sit eum veniam.</span>
	<span>Alias, accusantium, quod harum debitis quae dicta vitae consequuntur distinctio cumque ipsa. Ut, mollitia, consectetur impedit porro enim laudantium. Similique, nisi totam alias possimus distinctio eos cum laboriosam delectus quisquam!</span>
	<span>Accusantium, voluptas, ipsa, sequi, tempore modi reiciendis distinctio hic iste odit ex et exercitationem placeat repellendus! Cum, quas, consequatur ipsam minima facere sint ad dolore ex necessitatibus adipisci vitae laborum.</span>
	<span>Doloribus, similique nemo cumque excepturi commodi adipisci voluptates ullam laboriosam perspiciatis nihil a quo ad nam amet sint. Exercitationem, harum, dicta soluta eius autem quas praesentium voluptatem iste delectus illum!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni id vero eum similique tenetur in expedita nesciunt aliquid. Alias, corporis non fuga cumque voluptatibus sint quae architecto aliquam molestiae reprehenderit.</span>
	<span>Hic, magni odit quam rem illum totam qui optio debitis. Inventore, impedit blanditiis accusantium aliquid tenetur animi rem totam natus minus dolor debitis eius consequuntur praesentium cumque repellat. Mollitia, sapiente?</span>
	<span>Dolorem, dignissimos, perferendis, rem provident voluptate quam quasi cumque odit suscipit perspiciatis dolores nesciunt accusamus. Fuga nam iure quo labore mollitia ratione consequuntur tenetur sapiente quasi ullam? Quidem, modi, vel?</span>
	<span>Consequuntur, ut, qui, consectetur in voluptatum numquam cumque voluptate impedit modi vero quod sit veritatis odit maxime assumenda necessitatibus quo maiores optio recusandae obcaecati aspernatur pariatur illo itaque minima sed.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, pariatur, sapiente, facere, dolore placeat dignissimos corporis cupiditate voluptates dolores veniam facilis cum nemo eos nobis iste fugit aspernatur doloremque molestiae!</span>
	<span>Ut, numquam ullam nihil dolores voluptatum libero dolore laboriosam laborum voluptates. Suscipit, laudantium, minus, ipsa sed maxime obcaecati quos atque enim ducimus et aliquid amet modi iure ex ab voluptate?</span>
	<span>Sint, eaque ex vitae quidem rem itaque quis saepe voluptatem placeat libero cupiditate accusantium assumenda error recusandae voluptatibus illum eligendi similique cumque veritatis ratione quos repellendus possimus maiores minus nam.</span>
	<span>Porro, ex repellat quo incidunt iste distinctio quibusdam vero libero veritatis magni iusto consequuntur est necessitatibus perspiciatis natus error cumque odio similique modi optio voluptatum labore molestiae accusamus officiis ratione.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, ad, amet, id, eaque doloremque accusantium officia error ipsum expedita eius quibusdam debitis facilis dolores doloribus dolor repellendus distinctio sint voluptatibus.</span>
	<span>Nam, repellendus, quidem possimus consequatur reiciendis sapiente velit magni. Hic, amet nostrum rerum sit ullam voluptatibus maiores? Eos, atque repudiandae earum iusto inventore dicta repellendus ad in odio perferendis. Dolorum.</span>
	<span>Consequuntur, tenetur, sapiente, eligendi dignissimos earum aliquam iste accusamus fugiat tempora vitae molestiae ad quod optio. Iure, eos quam voluptatum quae soluta dolorem repudiandae quos adipisci dicta officiis. Doloribus, temporibus!</span>
	<span>Harum, ad, quidem, ullam sequi excepturi aliquid est earum repellat amet commodi quo corporis rerum tempore neque odit illo nihil ratione ea voluptate veritatis vero libero minus impedit iste quisquam!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, vel, velit minus iure qui quaerat cum eveniet tempore quam corporis consequatur quae totam delectus nemo inventore distinctio aspernatur esse dolor?</span>
	<span>Quisquam, eveniet ipsum vero excepturi quia ipsa exercitationem molestiae soluta! Vitae, architecto at dolore nam iure provident rerum ea delectus adipisci qui recusandae sint voluptates natus doloribus porro error esse.</span>
	<span>Placeat, ipsa, ipsum, ut iusto porro dolor animi commodi soluta quia nesciunt vero blanditiis consequatur illum. Cumque, pariatur, esse, laboriosam fuga architecto et neque voluptatibus atque magnam sapiente quis aliquid.</span>
	<span>Sequi, eligendi, neque, error, dicta repudiandae esse debitis ipsum distinctio numquam iure quisquam voluptate delectus ipsam suscipit aut reprehenderit voluptates asperiores aspernatur. Autem praesentium doloremque perferendis quis atque laudantium sapiente.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, fugiat, ea, provident aspernatur repellendus dolores modi assumenda tempore nesciunt perspiciatis dolor voluptatem libero eveniet ducimus expedita tempora minus architecto et!</span>
	<span>Natus, dolor, sunt, quos fugiat numquam omnis consequatur dolores assumenda molestiae ducimus sequi iusto laboriosam accusantium ipsam quo! Quod, architecto, veritatis qui esse est omnis numquam explicabo perspiciatis ratione quae.</span>
	<span>Sequi, totam dolorem dolor velit voluptate earum laboriosam magni debitis. Blanditiis, qui, enim, dolor eum quo ipsa beatae voluptates excepturi impedit illum repellendus quaerat adipisci architecto laboriosam ea maxime aperiam.</span>
	<span>Possimus, ipsum, ipsa quia asperiores ullam dolorem deserunt eius minus obcaecati voluptas illum neque expedita reprehenderit eveniet impedit assumenda est minima soluta velit sapiente enim ut pariatur totam veniam voluptatum!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, ipsum ab repellat consequatur omnis quia soluta laudantium eaque culpa eius. Aperiam modi molestiae quae repellat sequi. Libero, distinctio qui doloribus?</span>
	<span>Perferendis, voluptate, quis veniam odio necessitatibus dignissimos nobis saepe magni molestiae magnam eveniet dolores! Odit, repellat, nemo unde odio sit vero itaque quas iste rerum sunt porro repellendus pariatur. Tempora.</span>
	<span>Reiciendis, vel, nisi saepe nam et distinctio earum maxime cupiditate ipsa necessitatibus voluptas non veritatis sapiente quo error blanditiis similique aspernatur quam sunt impedit odit est ea minima adipisci eligendi.</span>
	<span>Facere, atque voluptatem blanditiis quibusdam asperiores pariatur mollitia autem a adipisci quo numquam quae sed voluptatum dolore tempore esse alias error. Harum, illum eveniet ullam perspiciatis velit provident autem necessitatibus.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, nisi labore soluta earum fugit commodi tempore ut repellendus voluptates quisquam iure enim dolorem placeat quis doloremque porro maxime vero eum?</span>
	<span>Nesciunt aliquam recusandae minus porro maiores aliquid vero doloremque velit magni aperiam! Atque, voluptates est sit esse impedit accusantium id. Odit, dignissimos iste eum provident modi ullam soluta vel omnis!</span>
	<span>Quia, ipsum laborum consectetur saepe accusantium animi qui blanditiis dignissimos accusamus aliquam voluptatum quis recusandae officia beatae tempore velit dicta quaerat nihil itaque omnis quod ad magni et ducimus deserunt.</span>
	<span>Animi, sequi, natus doloremque corporis debitis aspernatur harum aut recusandae nemo perferendis commodi repellendus unde aliquam dolores molestiae accusamus laboriosam reprehenderit ex eum amet modi nisi veritatis dolorum quia quam.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, odio explicabo obcaecati inventore consequatur nemo ratione aperiam earum unde natus dolor maiores reiciendis fugit praesentium labore at qui impedit ut.</span>
	<span>Commodi, atque, deleniti, eaque nemo molestiae deserunt ipsa tempora neque temporibus architecto nam at ab aliquam recusandae enim officiis soluta quisquam eos distinctio amet facere omnis exercitationem natus voluptas cumque!</span>
	<span>Dolorem, a aspernatur non aperiam sapiente corrupti nostrum nulla esse unde laborum. Velit eius eaque fuga praesentium consectetur error expedita laboriosam impedit? Officia hic quo amet cupiditate temporibus facere adipisci.</span>
	<span>Non, enim architecto dignissimos commodi tempore laborum maxime aut alias! Rerum, quasi, neque omnis vel temporibus ullam minus quas consectetur ut perspiciatis quod pariatur ea sed dicta in recusandae voluptas.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, consequatur, natus eligendi autem cupiditate similique corporis. Maxime, libero, accusantium odio repudiandae porro modi alias illo molestias quas ipsam ut tenetur.</span>
	<span>Doloremque ab hic cupiditate deserunt. Nam dolorum ut itaque suscipit aut. Perferendis voluptatum iure dolore nulla neque eum aliquam esse blanditiis? Autem, ratione tempore omnis fugit repellendus rem. Laborum, quisquam.</span>
	<span>Inventore, explicabo, culpa, porro, laudantium nam quisquam quas consequuntur incidunt unde voluptates quis natus suscipit rerum tempora eius nemo ipsum saepe sed quidem hic ipsa ea perspiciatis nesciunt! Sapiente, fugit.</span>
	<span>Quisquam, commodi doloribus aliquam quo natus fugit a nihil fuga quaerat laborum aut perspiciatis magnam sapiente corrupti amet nesciunt rerum sed atque debitis aperiam pariatur ab necessitatibus iste eveniet harum!</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, dicta consectetur perferendis nostrum praesentium quae tempore tenetur suscipit voluptatem sed! Voluptates, consequatur, ullam velit sapiente in odit rerum excepturi facere.</span>
	<span>Odio, illo, facere, voluptates, consequuntur a provident quis voluptatibus laboriosam quibusdam quo doloribus adipisci veritatis earum vitae hic dolorem aliquam ab illum atque fugiat reprehenderit deserunt id harum ullam delectus.</span>
	<span>Nulla, saepe, fugiat magni sunt beatae dolor aliquam fuga recusandae assumenda alias aspernatur nisi id amet ut quo voluptate deserunt! Quis, impedit distinctio reiciendis nesciunt non pariatur unde recusandae minus.</span>
	<span>Molestias, eius, eum esse non suscipit et fugiat consequatur sit aperiam sed tempore ipsa vel doloremque ipsam reiciendis. Optio, voluptates nisi in dolorem tempora autem eaque blanditiis iste fugit cupiditate.</span>
</p>
<p>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, distinctio, porro, aliquam commodi maiores voluptatibus labore omnis consequuntur eum assumenda corrupti ea facere facilis nulla harum consectetur inventore soluta esse.</span>
	<span>Obcaecati, beatae, tempora, nisi, unde optio accusantium praesentium nesciunt ex eligendi illum quia pariatur explicabo magni saepe voluptas ab id laudantium consectetur repellendus fugit neque minus totam maiores vel reprehenderit!</span>
	<span>Quisquam, reiciendis, eius, facere accusantium quod quo commodi ex tempore iusto pariatur facilis inventore? Vitae, rerum, quis, debitis, minima laboriosam commodi ullam ab consequatur modi eius aperiam autem libero mollitia.</span>
	<span>Facilis, consectetur minus minima aliquid provident esse eos cupiditate dolores explicabo perspiciatis sapiente quis odio tempore neque deserunt sit fugit placeat reprehenderit animi recusandae officia unde velit totam ab corporis!</span>
</p>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

无需补充脚本。它工作正常。要编辑它，请更改：

<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="100">

数据偏移顶=＆＃34; 100＆＃34;表示当您从顶部滚动100像素时，导航将是粘性的，当您从顶部向上滚动到小于100像素时将再次正常。

有一些样式可以防止在修复后将内容添加到内容的顶部

时跳转