代码之家  ›  专栏  ›  技术社区  ›  Beep

根据数组向下定位,并在菜单中突出显示部分

  •  0
  • Beep  · 技术社区  · 6 年前

    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>';
                  }
              }
          })
    
    0 回复  |  直到 6 年前