我有一个函数,应该将页面拖放到与数据属性data-target
和data-index
匹配的页面部分(功能一)
但是此功能不会突出显示您在菜单中滚动的当前部分。
您可以通过$(this).addClass('menuFollower-t');
的错误尝试来看到,我试图设置一个类来模拟这种效果,无论它如何无法如期发挥作用,仅在单击时起作用,并且不会被删除。
如果有人可以,请帮助我添加一堂课,以便在单击滚动或节项目时菜单显示出来。
功能一
_pdpNavigationScrollTo = function () {
_pdpLink.on('click', function (e) {
e.preventDefault();
var _fixedNavHeight, _target, _target_index, _scrollTopPixels;
if (!INFORMA.global.device.isDesktop) {
_target = $(this).data('target');
_target_index = $(this).data('target-index');
$('#pdp-sections').slideUp();
_pdpNavigationHeight = $('#pdp-navigation .nav-pdp-nondesktop').outerHeight();
if (!_pdpFixed)
_pdpSectionsHeight = $('#pdp-sections').height();
else
_pdpSectionsHeight = 0;
_fixedNavHeight = _navHeightMobile;
var anchorElementArray = $("[id='" + _target + "']");
// console.log(anchorElementArray[_target_index]);
if (anchorElementArray.length >= [_target_index]) {
//Fix ben-2018-onscroll
_scrollTopPixels = $(anchorElementArray[_target_index]).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
//End
// console.log(.offset)
} else {
_scrollTopPixels = $("#" + _target).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
}
$('html, body').stop().animate({
scrollTop: _scrollTopPixels
}, 1000);
} else {
$('#pdp-navigation li').removeClass('selected');
$('#pdp-navigation li').addClass('select-options');
_pdpNavigationHeight = _pdpNavigation.height();
_target = $(this).data('target');
_target_index = $(this).data('target-index');
_fixedNavHeight = _navHeightMobile;
var anchorElementArrayDesk = $("[id='" + _target + "']");
if (anchorElementArrayDesk.length >= [_target_index]) {
//Fix ben-2018-onscroll
_scrollTopPixels = $(anchorElementArrayDesk[_target_index]).offset().top - (_fixedNavHeight + _pdpNavigationHeight);
//End
$(this).addClass('menuFollower-t');
} else {
_scrollTopPixels = $("#" + _target).offset().top - (_fixedNavHeight + _pdpNavigationHeight);
}
$('html, body').stop().animate({
scrollTop: _scrollTopPixels
}, 1000);
}
})
};
功能二是一个不再使用但已使用的旧功能,但是它是基于数据构建菜单的,功能二使菜单中的该部分突出显示。我已经尝试了几个小时才能使它与新功能一起使用,只是使菜单部分无法正常工作。
非常感谢您的帮助。
第二功能
$('.pdp-item-id').each(function() {
var _Id = $(this).attr("id");
for(var i = 0; i < _ArrayOfPdpElements.length; i++) {
if(_ArrayOfPdpElements[i].Target === _Id) {
Html += '<li><a href="#" data-target="' +_ArrayOfPdpElements[i].Target+ '"><span>' +_ArrayOfPdpElements[i].Name+ '</span></a></li>';
}
}
})