当窗口滚动到链接容器时,我想更新链接的类。它在某些浏览器上运行良好,但浏览器在iOS上崩溃。
我知道为什么或如何改进这个?
HTML:
<ul id="section-follow" data-default="background-none" data-active="background-red">
<li class=""><a href="#first">First</a></li>
<li class=""><a href="#second">Second</a></li>
<li class=""><a href="#third">Third</a></li>
<li class=""><a href="#fourth">Fourth</a></li>
</ul>
Javascript:
function SectionFollow() {
if ($('#section-follow').length) {
var sections = {},
_height = $(window).height(),
i = 0;
var classDefault = $('#section-follow').attr('data-default');
var classActive = $('#section-follow').attr('data-active');
$('.follow').each(function() {
sections[this.id] = $(this).offset().top;
});
var pos = $(this).scrollTop();
for (i in sections) { // Each section
if (sections[i] < pos + (_height * .5)) { // 50% from top
$('#section-follow li a').removeClass(classActive).addClass(classDefault);
$('a[href="#'+i+'"]').removeClass(classDefault).addClass(classActive); //
if (history.pushState) { // Update the URL hash
history.pushState(null, null, window.location.origin + window.location.pathname + window.location.search + $('a[href="#'+i+'"]').attr('href')); // Set the hash using the history api if available to tackle Chromes repaint bug on hash change
} else {
window.location.hash = $('a[href="#'+i+'"]').attr('href');
// Otherwise fallback to the hash update for sites that don't support the history api
}
} // End if 50% from the top
} // End each section
} // End if section follow exists
} // End SectionFollow
$(window).scroll(function() {
SectionFollow();
});