jQuery 如何在不使用引导程序的情况下使用 scrollspy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30348314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use scrollspy without using bootstrap
提问by r3plica
Does anyone know how to use scrollspy without using bootstrap? I am trying to get this to work in one of my projects using this repository:
有谁知道如何在不使用引导程序的情况下使用 scrollspy？我正在尝试使用此存储库在我的一个项目中使用它：
https://github.com/sxalexander/jquery-scrollspy
https://github.com/sxalexander/jquery-scrollspy
but it just doesn't do what the bootstrap one does. The litags are not marked as active :( Any help would be appreciated.
但它只是不做引导程序所做的事情。在李标签未标记为活动:(任何帮助将不胜感激。
I have tried doing this:
我试过这样做：
$('#intel_nav').scrollspy({
//n: $('#nav').offset().top,
onEnter: function (element, position) {
console.log(element);
$("#intel_nav").addClass('moo');
},
onLeave: function (element, position) {
$("#intel_nav").removeClass('out');
}
});
The element appears to be the actual menu, so I have no idea how to actually get the id of the element I am currently hovering over.
该元素似乎是实际菜单，所以我不知道如何实际获取我当前悬停在其上的元素的 id。
采纳答案by r3plica
To fix this, I wrote my own plugin. Which can be found here:
为了解决这个问题，我编写了自己的插件。可以在这里找到：
回答by bnunamak
If anyone is still interested in this, I couldn't get the bootstrap scrollspy to work quickly enough so I wrote my own (technically inefficient, but simple) solution.
如果有人仍然对此感兴趣，我无法让 bootstrap scrollspy 足够快地工作，所以我编写了自己的（技术上效率低下，但很简单）的解决方案。
Here's a demo:
这是一个演示：
$(window).bind('scroll', function() {
var currentTop = $(window).scrollTop();
var elems = $('.scrollspy');
elems.each(function(index){
var elemTop = $(this).offset().top;
var elemBottom = elemTop + $(this).height();
if(currentTop >= elemTop && currentTop <= elemBottom){
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.parent().addClass('active').siblings().removeClass( 'active' );
}
})
}); .active{
color: red;
background-color: red;
}
#nav{
position:fixed;
top:0;
right:50%;
}
section{
min-height: 500px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-template">
<div class="row col-xs-12 text-center">
<ul>
<li class="active">
<a href="#Home">Home</a>
</li>
<li>
<a href="#AboutUs">AboutUs</a>
</li>
<li>
<a href="#Images">Images</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="scrollspy" id="Home">
Home
</section>
<section class="scrollspy" id="AboutUs">
AboutUs
</section>
<section class="scrollspy" id="Images">
Images
</section>
<section class="scrollspy" id="Contact">
Contact
</section>
</body>回答by Andrew
You can use bootstrap's customize page to download ONLY scrollspy JS. You will also need the "nav" css. This link should be exactly what you need: http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d
您可以使用 bootstrap 的自定义页面下载 ONLY scrollspy JS。您还需要“导航”CSS。此链接应该正是您所需要的：http: //getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d
Download the JS and CSS files and add them to your site. Scrollspy should work per bootstrap's docs (http://getbootstrap.com/javascript/#scrollspy)
下载 JS 和 CSS 文件并将它们添加到您的站点。Scrollspy 应该按照引导程序的文档工作（http://getbootstrap.com/javascript/#scrollspy）
回答by Gyrocode.com
github.com/sxalexander/jquery-scrollspydoesn't seem to make <nav>menus active automatically as Bootstrap plug-in does.
github.com/sxalexander/jquery-scrollspy似乎<nav>不像 Bootstrap 插件那样自动激活菜单。
However it does provide ID of the element that comes into view. See this JSFiddlethat prints element IDs in the console.
但是，它确实提供了进入视图的元素的 ID。请参阅在控制台中打印元素 ID 的这个 JSFiddle。
You need to decide how to highlight menu item corresponding to the element having its ID. For example, set data-target="section1"attribute on menu link and then when element with ID section1comes into view, locate the menu by $("#intel_nav a[data-target='" + "section1" + "']")
您需要决定如何突出显示与具有其 ID 的元素相对应的菜单项。例如，data-target="section1"在菜单链接上设置属性，然后当带有 ID 的元素section1进入视图时，通过$("#intel_nav a[data-target='" + "section1" + "']")
回答by jam65st
After reviewing all recommendations, I follow the Gyrocode.comidea, with the Mr. Sam Alexander (sxalexander)jquery-scrollspy, a nicely work based on David Walsh's MooTools scrollspy; I believe that is not to hard use this with any menu (with or without nav) or in any creative duty as the proposed by Gyrocode.comin their JSFiddle.
在查看所有建议后，我遵循Gyrocode.com 的想法，使用Sam Alexander (sxalexander) jquery-scrollspy 先生，这是基于David Walsh 的 MooTools scrollspy的出色工作；我相信这并不是像Gyrocode.com在他们的JSFiddle 中提出的那样，在任何菜单（有或没有导航）或任何创造性职责中硬使用它。
All my sections that can be reached when all have the same tag (as <section>) or in this case the same class name (.scrollspy), and the sections tell us their ID(as part of the plugin)
当所有部分都具有相同的标记（作为<section>）或在这种情况下具有相同的类名（.scrollspy）时，我可以访问的所有部分，并且这些部分告诉我们它们的ID（作为插件的一部分）
I share my implementation of this:
我分享我的实现：
var menuSelected = null; // var to detect current selected element to pass the class that does visible the spy.
jQuery(document).ready(function( $ ){
// Detect Initial scroll position
var currentTop = $(window).scrollTop();
$('.scrollspy').each(function (i) {
var position = $(this).position();
// Only to activate the top element ( current # )
// if current is less than height.
if ( i === 0 && !menuSelected && currentTop < $(this).height() ) navUpdate( $('a[href="#' + $(this).attr( 'id' ) + '"]') );
// Basic implementation
$(this).scrollspy({
min: position.top - 100,
max: position.top + $(this).height(),
onEnter: function (element, position) {
// update the button that have the element ID
navUpdate( $('a[href="#' + element.id+ '"]') );
}
});
});
// method to update the navigation bar
function navUpdate( where ){
if ( menuSelected ) menuSelected.removeClass( 'active' );
menuSelected = where.parent();
menuSelected.addClass( 'active' );
}
});
