Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 如何在引导中设置ScrollSpy的偏移量？

Twitter bootstrap 如何在引导中设置ScrollSpy的偏移量？

twitter-bootstrap

Twitter bootstrap 如何在引导中设置ScrollSpy的偏移量？,twitter-bootstrap,Twitter Bootstrap,我有一个网站，导航栏固定在顶部，主内容区有3个div 我正在尝试使用引导框架中的scrollspy 我有它成功地突出显示菜单中的不同标题，当你滚动过去的div 我也有它，所以当你点击菜单时，它会滚动到页面的正确部分。但是，偏移不正确（它没有考虑导航栏，所以我需要偏移大约40像素） 我在地图上看到它提到了偏移选项，但我不确定如何使用它 当它说你可以使用scrollspy与$（“#navbar”）。scrollspy（）一起使用时，我也不知道它是什么意思。scrollspy（）我不确定在哪里包含它，

我有一个网站，导航栏固定在顶部，主内容区有3个div

我正在尝试使用引导框架中的scrollspy

我有它成功地突出显示菜单中的不同标题，当你滚动过去的div

我也有它，所以当你点击菜单时，它会滚动到页面的正确部分。但是，偏移不正确（它没有考虑导航栏，所以我需要偏移大约40像素）

我在地图上看到它提到了偏移选项，但我不确定如何使用它

当它说你可以使用scrollspy与
$（“#navbar”）。scrollspy（）
一起使用时，我也不知道它是什么意思。scrollspy（）我不确定在哪里包含它，所以我没有，而且一切似乎都在工作（除了偏移量）

我以为偏移量可能是body标签上的
数据偏移量='10'
，但它对我没有任何作用

我有一种感觉，这是非常明显的事情，我只是错过了它。有什么帮助吗

我的代码是

...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
    <a class="brand" href="#">VIPS</a>
    <ul class="nav">
        <li class="active">
             <a href="#trafficContainer">Traffic</a>
        </li>
        <li class="">
        <a href="#responseContainer">Response Times</a>
        </li>
        <li class="">
        <a href="#cpuContainer">CPU</a>
        </li>
      </ul>
    </div>
</div>
</div>
<div class="container">
<div class="row">
    <div class="span12">
    <div id="trafficContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="responseContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
<div class="row">
    <div class="span12">
    <div id="cpuContainer" class="graph" style="position: relative;">
    <!-- graph goes here -->
    </div>
    </div>
</div>
</div>

...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>

。。。

    

  • 

    • 

  • 

    • 

  • 

    • 


...
如果您想要偏移量为10，您可以将其放在脑海中：

<script>
  $('#navbar').scrollspy({
    offset: 10
  });
</script>


$（“#导航栏”）.scrollspy({
抵销：10
});
您的身体标签如下所示：

<body data-spy="scroll">
我认为偏移量可能会影响该部分的底部位置

我通过添加

  padding-top: 60px;
在bootstrap.css的声明部分

希望有帮助

引导仅使用偏移量解决间谍问题，而不使用滚动。这意味着滚动到正确的位置取决于您

试试这个，它对我有用：为导航单击添加一个事件处理程序

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});
我在这里找到了：

正如蒂姆所暗示的，诀窍是利用填充。所以问题是，你的浏览器总是想把你的定位点滚动到窗口的正上方。如果您将锚定设置在文本实际开始的位置，它将被菜单栏遮挡。相反，您要做的是将锚点设置为容器
或
标记的id，导航/导航栏将自动使用该id。然后，您必须将容器的
padding top
设置为所需的偏移量，并将容器的
margin top
设置为
padding top
的对面。现在，容器的块和锚点从页面的正上方开始，但其中的内容直到菜单栏下方才开始

如果您使用的是常规锚点，那么您可以通过在容器中使用如上所述的负边距top来完成相同的任务，但不使用填充。然后你把一个常规的
）放在；将以下内容添加到CSS将为您处理导航栏偏移：


body {
    margin-top: 40px;/* make room for the nav bar */
}

/* make room for the nav bar */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
    padding-top: 60px;
    margin-top: -40px;
}



您可以使用此选项更改scrollspy的动态偏移量（假设您监视身体）：


如果需要动态更改偏移值，这也适用。（我喜欢scrollspy在下一部分距离窗口大约一半时切换，因此我需要在调整窗口大小时更改偏移量。）
我在每个
h1
元素之前添加了40px高度
.vspace
元素，该元素保持锚定


<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>



它工作得很好，空间也不拥挤。
我对Acjohnson 55和Kurt UXD的解决方案有问题。两者都用于单击指向散列的链接，但scrollspy偏移量仍然不正确

我提出了以下解决方案：


<div class="anchor-outer">
  <div id="anchor">
    <div class="anchor-inner">
      <!-- your content -->
    </div>
  </div>
</div>


您需要将40px的填充/边距替换为导航栏的高度和锚点的id

在这个设置中，我甚至可以观察到为数据偏移属性设置值的效果。如果找到100-200左右的数据偏移的大值，就会导致一个更为期待的行为（ScReStay-Switter），“如果标题在屏幕中间，就会发生”。
我还发现scrollspy对诸如未关闭的div标记之类的错误非常敏感（这是很明显的），我在这里的朋友也是如此


在我看来，scrollspy最适合于带有锚ID的整个部分，因为常规锚元素在向后滚动时不会产生预期效果（scrollspy-“开关”最终在您点击锚元素（例如标题）时发生，但此时您已经滚动了用户希望属于相应标题的内容）。
您还可以打开
bootstap offset.js
并修改


$.fn.scrollspy.defaults = {
  offset: 10
}


那里。
来自：

[这]仅用于修改滚动计算-我们不会改变实际的锚定点击

因此，设置偏移量仅影响scrollspy认为页面滚动到的位置。单击锚定标记时，它不会影响滚动

使用固定导航栏意味着浏览器滚动到错误的位置。您可以使用JavaScript解决此问题：


var navOffset = $('.navbar').height();

$('.navbar li a').click(function(event) {
    var href = $(this).attr('href');

    // Don't let the browser scroll, but still update the current address
    // in the browser.
    event.preventDefault();
    window.location.hash = href;

    // Explicitly scroll to where the browser thinks the element
    // is, but apply the offset.
    $(href)[0].scrollIntoView();
    window.scrollBy(0, -navOffset);
});


但是，为了确保scrollspy突出显示正确的当前元素，您仍然需要设置偏移：


<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">


刚刚设定：


data-offset="200"



数据偏移量
默认为“50”，相当于10px，因此只要增加
数据偏移量
，您的问题就解决了。
引导4（2019年更新）
实现：固定导航、Scrollspy和平滑滚动

这是上面@wilfred hughes的解决方案，它通过使用CSS“：：before”在每个节标记之前预先显示一个未显示的块，准确地解决了引导固定导航栏的重叠问题。优点：你不会在你的部分之间有不必要的填充。例如，第3节可以垂直放置在第2节的正上方，它仍然会滚动到第3节顶部的准确正确位置

第n面

var navOffset = $('.navbar').height();

$('.navbar li a').click(function(event) {
    var href = $(this).attr('href');

    // Don't let the browser scroll, but still update the current address
    // in the browser.
    event.preventDefault();
    window.location.hash = href;

    // Explicitly scroll to where the browser thinks the element
    // is, but apply the offset.
    $(href)[0].scrollIntoView();
    window.scrollBy(0, -navOffset);
});



<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">



a[id]:before { 
  display: block; 
  content: " ";
  // Use the browser inspector to find out the correct value here.
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}



data-offset="200"



<section id="section1" class="my-5">
...
<section id="section2" class="my-5">
...
<section id="section3" class="my-5">
...



 <script>
      // Init Scrollspy
      $('body').scrollspy({ target: '#main-nav' });

      // Smooth Scrolling
      $('#main-nav a').on('click', function(event) {
        if (this.hash !== '') {
          event.preventDefault();

          const hash = this.hash;

          $('html, body').animate(
            {
              scrollTop: $(hash).offset().top
            },
            800,
            function() {
              window.location.hash = hash;
            }
          );
        }
      });
    </script>



// Solution to Fixed NavBar overlapping content of the section.  Apply to each navigable section.
// adjust the px values to your navbar height
// Source: https://github.com/twbs/bootstrap/issues/1768
#section1::before,
#section2::before,
#section3::before {
  display: block;
  content: ' ';
  margin-top: -105px;
  height: 105px;
  visibility: hidden;
}

body {
  padding-top: 105px;
}