0

我正在尝试构建一个类似于 getboostrap 网站的滚动间谍，其中侧导航栏在您滚动时上升到页面顶部，但随后会停留在顶部（http://getbootstrap.com/css/）。我在我的 html 中编写了一个小脚本来访问标题大小，以便它与不同的标题兼容，但我想将它移动到一个单独的 javascript 文件中。在这里，我包括了我所有的 html 和用于 scrspy 和 affix 的 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
    }
  });
});
4

2 回答 2

0

我添加了

<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
    }
  });
});
于 2014-07-24T17:52:07.297 回答
0

请注意除了.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，如果您在滚动之前将其删除”。

于 2014-07-23T21:25:59.403 回答