滚动活动类上的Bootstrap需要从顶部添加100px [英] Bootstrap on scroll active class need to add before 100px from top
问题描述
Bootstrap滚动导航仅在其到达屏幕顶部时才更改活动状态.当它从顶部到达100px时，我需要对其进行更改.
Bootstrap scroll navigation changes the active state only when it reaches top of the screen. I need it to be changed when it reaches 100px from the top.
当我单击导航时，它会在100px之前停止，这是正确的，但active状态不会改变.
When I click on navigation it stops before 100px which is correct but the active state doesn't change.
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
例如:在此演示(
For eg: In this demo (download link)the active state only changes if the the div goes to top. How do I make it so the active state change when it is 100px from the top.
推荐答案
如果我正确理解了您的问题，那么当您的导航栏从顶部移到100px时，您想更改其链接的活动状态，对吗? Bootstrap的scrollspy具有一些javascript引用，如果在给出的示例中查看body标记，则可以将它们设置为body标记以控制偏移量.
If I understand your question correctly you want to change the active state of the links in your nav when it gets to 100px from from the top, correct? Bootstrap's scrollspy has some javascript references that you can set to the body tag to control the offset if you look at the body tag in the example that you have given you can see that it looks like the following:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
它设置了scrollspy插件和目标.您也可以设置data-offset.因此，它看起来类似于以下内容:
It sets the scrollspy plugin and the target. You can also set the data-offset. So it would look something like the following:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="100">
您可以阅读Bootstrap的JavaScript参考资料此处
You can read Bootstrap's javascript reference Here
这篇关于滚动活动类上的Bootstrap需要从顶部添加100px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
