javascript 向下滚动页面时jQuery更改哈希（片段标识符）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5315659/
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
jQuery change hash (fragment identifier) while scrolling down page
提问by Owen
I'm building a one pager website. Eg. every page (5 in total) is on one big page with the main menu fixed at the top. When you click on a menu link it slides you down to that pages anchor tag and the clicked menu item get a "active" CSS class.
我正在建立一个单页网站。例如。每个页面（总共 5 个）都在一个大页面上，主菜单固定在顶部。当您单击菜单链接时，它会将您向下滑动到该页面的锚标记，并且单击的菜单项会获得一个“活动”CSS 类。
What I'd like to do now is allow the user to scroll themself but still have the menu "active" item and URL hash change as they do.
我现在想做的是允许用户自己滚动，但仍然有菜单“活动”项和 URL 哈希更改。
So my question basically is how do I know when the user has scrolled down to a different page so I can update the menu and URL hash (fragment identifier).
所以我的问题基本上是我如何知道用户何时向下滚动到不同的页面，以便我可以更新菜单和 URL 哈希（片段标识符）。
Thanks
谢谢
回答by Valerij
its possible but there are a requirement to your page (for my solution to work):
这是可能的，但您的页面有一个要求（为了我的解决方案工作）：
your page have to be separated in divs(or sections whatever) with unique ids (i hope you dont use anchor <a>'s)
您的页面必须在具有唯一 ID 的 div（或任何部分）中分隔（我希望您不要使用 anchor<a>的）
than you can use code like this:
比你可以使用这样的代码：
$(document).bind('scroll',function(e){
$('section').each(function(){
if (
$(this).offset().top < window.pageYOffset + 10
//begins before top
&& $(this).offset().top + $(this).height() > window.pageYOffset + 10
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
) {
window.location.hash = $(this).attr('id');
}
});
});
with html like this
像这样的html
<section id="home">
Home
</section>
<section id="works">
Works
</section>
<section id="about">
About
</section>
回答by ahkeno
I have same issue of this for fix height section content which will change Hash according to the scroll.Somehow this code doesn't work on other browser apart of Chrome. And also manipulate DOM in the scroll then it has to take very long for that event to get process refer http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/Here are sample code of How I solve this
对于修复高度部分内容，我有同样的问题，它将根据滚动更改哈希。不知何故，此代码在除 Chrome 之外的其他浏览器上不起作用。并且还在滚动中操作 DOM 然后该事件需要很长时间才能获得过程参考http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/这里是示例我如何解决这个问题的代码
(function () {
// Find all top,bottom and Hash of each sections,
// Do this only if the section height remain the same always
// Move this into the step() if your section height does change.
// e.g. browser resize
//
var section = $.map($("section"), function (e) {
var $e = $(e);
var pos = $e.position();
return {
top: pos.top,
bottom: pos.top + $e.height(),
hash: $e.attr('id')
};
});
//Checking scroll
var top = null;
var changed = false;
var currentHash = null;
$(window).scroll(function () {
var newTop = $(document).scrollTop();
changed = newTop != top;
if (changed) {
top = newTop;
}
});
// You wouldn't want to keep checking the scroll state as
// it affects the browser performance when it's accessing
// DOM and reduce your FPS (Frame per Seconds) for scrolling
//
function step() {
if (!changed) {
// Top did not change
return setTimeout(step, 200);
}
var count = section.length;
var p;
while (p = section[--count]) {
if (p.top >= top || p.bottom <= top) {
continue;
}
if (currentHash == p.hash) {
break;
}
var scrollTop = $(document).scrollTop();
window.location.hash = currentHash = p.hash;
// prevent browser to scroll
$(document).scrollTop(scrollTop);
}
setTimeout(step, 200);
}
setTimeout(step, 200);
})();
回答by Richard Adnams
With jquery you can use the scrollTop method to find the scroll position and then compare it to say the position of elements on the page to work out where on the page they are and update accordingly.
使用jquery，您可以使用scrollTop 方法来查找滚动位置，然后将其与页面上元素的位置进行比较，以确定它们在页面上的位置并相应地进行更新。
