向下锚定一个数组,并在菜单中突出显示该部分

时间:2018-11-06 14:52:19

标签: javascript jquery arrays twitter-bootstrap scroll

我有一个函数,应该将页面拖放到与数据属性data-targetdata-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>';
              }
          }
      })

0 个答案:

没有答案