我有一个来自CMS的页面部分数组,我需要先根据数据属性将菜单锚定到该部分,然后data-target
,然后根据data-index
(数组)
我让该部分的锚点起作用,但是我似乎无法使与相关部分和菜单项关联的类起作用。单击或滚动到该部分时,我需要在菜单中的项目名称下应用边框。
我的JavaScript函数,用于在点击时锚定到该部分
此部分控制着页面上某个特定部分的锚点,但是我无法让类menuFollower-t
用于当前部分,它仅在您单击菜单项并且不显示菜单项时才有效如果您单击下一项,则消失,如果滚动到该部分,也将不起作用
我的menuFollower-t仅为background: black;
进行测试
_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);
}
})
};