Question

我正在尝试构建一个类似于getboostrap网站的卷轴，当滚动时，侧面导航栏会上升到页面顶部，但随后会粘到顶部（http://getbootstrap.com/css/）。我在我的html中编写了一个小脚本来访问标题大小，以便它与不同的标题兼容，但我想将它移动到一个单独的javascript文件中。在这里，我将所有的html和css包括在scrspy和affix中。

HTML：

<div id="myScrollspy" role="complementary">

  <script>
    var element = document.getElementById('headerSize');
    document.write('<ul class="nav scrspy affix" data-spy="affix" data-offset-top="' +    element.offsetHeight + '" data-offset-bottom="200">');
  </script>

  <ul class="nav scrspy affix" data-spy="affix">
    <li class="active"><a href="#section-1">Section One</a></li>
    <ul class="nav scrspy">
      <li><a href="#section-1-1">Section 1.1</a></li>
      <li><a href="#section-1-2">Section 1.2</a></li>
    </ul>
    <li><a href="#section-2">Section Two</a></li>
    <li><a href="#section-3">Section Three</a></li>
    <li><a href="#section-4">Section Four</a></li>
    <li><a href="#section-5">Section Five</a></li>
  </ul>
</div>

<section>
  <h2 id="section-1">Section One</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-1-1">Section 1.1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.  

  <h2 id="section-1-2">Section 1.2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.

  <h2 id="section-2">Section Two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-3">Section Three</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-4">Section Four</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>

  <h2 id="section-5">Section Five</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
</section>

CSS：

.scrspy {
  > li {
    float: left;
    > a {
      color: @gray-dark;
      &:hover {
        border-right: 2px solid @blue;
      }
    }
  }
  .nav-stacked;
  .hidden-xs;
  .hidden-sm;
}
ul.scrspy, ul.scrspy ul li {
  width: 9.75rem;
}
ul.scrspy.affix {
  top: 1.85rem;
}
ul.scrspy ul li {
  padding: .315rem .47rem;
  padding-left: 1rem;
  font-size: @font-size-small;
}
ul.scrspy li.active a, ul.scrspy li.active a:hover {
  color: @daimler-blue;
  border-right: 2px solid @blue;
}
.affix {
  position: fixed;
}
ul.scrspy.affix {
  position: fixed;
  top: 0;
  z-index: 10;
}

我在一个单独的.js文件中尝试了这个，在html中有一个链接，但它似乎不起作用。 JS：

$(document).ready(function () {
  var element = document.getElementById('headerSize');
  $('ul.scrspy').affix({
    offset: {
      top: element.offsetHeight
      bottom: 200
    }
  });
});

Answer 1

请注意除了.sticky-top-affix之外的css用于演示。

另请注意data-top-add="20"应该是您在该课程中设置的top，以使其顺利进行。这是选择 - 尝试没有它，看看会发生什么。

.sticky-top-affix {
    position: fixed;
    top: 20px;
}

body {
    height: 2000px;
}

nav {
    border: 1px solid black;
    width: 250px;
}

<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>
<p>Some stuff before the menu</p>

<nav class="sticky-top" data-top-add="20">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

var $stickyEls;

function onWindowScroll() {
    var scrollTop = $(window).scrollTop();
    $stickyEls.each(function() {
       var $el = $(this),
           topOffset = $el.data('topOffset');
       $el[scrollTop >= topOffset ?
           'addClass' : 'removeClass']('sticky-top-affix');
    });
}

function stickyTopInit() {
    $stickyEls = $('.sticky-top');

    // Save positions.
    $stickyEls.each(function() {
        var $el = $(this);
        var addToTop = +$el.attr('data-top-add') || 0;
        $el.data('topOffset', $el.offset().top - addToTop);
    });

    $(window).scroll(onWindowScroll);
}


$(document).ready(stickyTopInit);

小提琴：http://jsfiddle.net/y3umh/

我们在这里所做的就是说＆＃34;当你滚动浏览菜单的顶部时，添加sticky-top-affix，如果你滚动它之前将其删除＆＃34;。

Answer 2

我添加了

<ul class="nav scrspy affix" id="stay" data-spy="affix">

到html，并将javascript更改为：

$(document).ready(function () {
  var element = document.getElementById('headerSize');
  $("#stay").affix({
    offset: {
      top: element.offsetHeight
    }
  });
});

使用javascript将scrollspy粘贴到顶部

2 个答案: