Affix用JavaScript滾動到頂部

Question

我正在嘗試構建一個與getboostrap網站類似的scrollspy，在滾動時，側面導航欄會升至頁面頂部，但隨后會停留在頂部（ http://getbootstrap.com/css/ ）。 我在html中編寫了一個小腳本來訪問標頭大小，以便與不同的標頭兼容，但是我想將其移動到單獨的javascript文件中。 在這里，我包括了所有的HTML和scrspy和后綴的css。

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/

我們在這里所做的只是說：“當滾動通過菜單頂部時，添加sticky-top-affix ，如果在滾動之前將其刪除，則添加它。”

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