我将这段代码用于导航滚动到section。
var lastId;
var topMenu = $(".community-nav");
var topMenuHeight = topMenu.outerHeight() - 19;
if(window.matchMedia("(max-width: 768px)").matches){
var logoHeight = $(".community-logo").outerHeight();
var topMenuHeight = topMenu.outerHeight() - logoHeight;
};
menuItems = topMenu.find('.community-links li > div'),
scrollItems = $('.nav-section')
menuItems.click(function(e){
var href = $(this).attr("data-target");
var currentItem = $(this);
var sectionClass = $("#community-intranav");
scrollPartialMenuItem(currentItem, sectionClass);
var offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight + 20;
if(window.matchMedia("(max-width: 768px)").matches){
};
$('html, body').stop().animate({
scrollTop: offsetTop
}, 850);
e.preventDefault();
});
function getCurrentSection(scrollPosition) {
return scrollItems.toArray().findIndex(function(item) {
return item.offsetTop < scrollPosition && item.offsetTop+item.clientHeight > scrollPosition;
});
}
// Bind to scroll
$(window).on("load scroll",function(e){
var scrollPosition = $(this).scrollTop()+topMenuHeight;
var currentSection = getCurrentSection(scrollPosition) ;
var id = currentSection > -1 ? scrollItems[currentSection].id : "";
if (id && lastId !== id) {
lastId = id;
menuItems.removeClass("active");
menuItems.filter("[data-target='#"+id+"']").addClass('active');
}
});
在上面的代码中,IE中支持findIndex方法。我想要一个替代方法,以便可以使用findIndex方法以外的方法重写函数getCurrentSection。
最佳答案
您可以使用波利填充来添加诸如此类的缺失功能。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill
将此添加到您的代码
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
if (!Array.prototype.findIndex) {
Object.defineProperty(Array.prototype, 'findIndex', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return k.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return k;
}
// e. Increase k by 1.
k++;
}
// 7. Return -1.
return -1;
},
configurable: true,
writable: true
});
}
或者您可以使用诸如pollyfill.io之类的pollyfill服务CDN
<script src='https://cdn.polyfill.io/v2/polyfill.js?features?feature=Array.prototype.findIndex'>
</script>