如何设置活动链路指示灯位置

Question

大家下午好!我试图使jquery lavalamp效果工作，但我在一个点上卡住了。当我点击一个项目时，它被标记为活动，它会改变颜色，但菜单下的箭头不会停留在活动的箭头下，每次都会从页面中返回。有我的代码，那里是设置什么发生与箭头而悬停，而活动。我必须编辑活动设置，但我不知道如何……谢谢你的建议!(顺便说一句。出现问题的页面- www.idealcars.cz)

编辑:好的，我已经解决了点击后箭头位置的问题，但仍然存在箭头在滚动期间不改变她的位置的问题。

这是我的代码现在，"滚动"部分不工作。请帮忙好吗?

var foundActive = false, activeElement, indicatorPosition, indicator = $('#cssmenu #menu-indicator'), defaultPosition, storage;

$("#cssmenu > ul > li").each(function() {
  if ($(this).hasClass('active')) {
  $(this).addClass('active');
    activeElement = $(this);
    foundActive = true;
  } else {
  }
});
if (foundActive === false) {
  activeElement = $("#sipka").first();
}
defaultPosition = indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
storage = defaultPosition;
console.log(activeElement);
console.log(activeElement.position().left);
console.log(activeElement.width());
indicator.css("left", indicatorPosition);
$("#logo").hover(function() {
  activeElement = $("#sipka");  
  indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
  indicator.css("left", indicatorPosition);
}, 
function() {
  indicator.css("left", defaultPosition);
});
$("#logo").click(function () {
            //reset the selected item
        activeElement = $("#sipka").first(); 
        indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
        defaultPosition = indicatorPosition;
            }); 
 function scrollOn(event){
    var scrollPos = $(document).scrollTop();
    $('#cssmenu > ul > li').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            activeElement = currLink; 
        indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
        defaultPosition = indicatorPosition;
        }
        else{
        }
    }
    );
}

$("#cssmenu > ul > li").hover(function() {
  activeElement = $(this);  
  indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
  indicator.css("left", indicatorPosition);
}, 
function() {
  indicator.css("left", defaultPosition);
});
$("#cssmenu > ul > li").click(function () {
    activeElement = $(this); 
        indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;    
     defaultPosition = indicatorPosition;
        });

Answer 1

嗨@Hynek我已经在你的脚本中做了一些修复，根据你之前的问题(已删除)尝试以下脚本希望这可能会有所帮助。

<script>
var is_click = 0;
var anchor_name = '';
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        is_click = 1;
        anchor_name = $(this).html();
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
    $('#cssmenu ul li').on('click', function (e) {
        is_click = 1;
        anchor_name = $(this).find('a').html();
    });
    $('a[href^="#"]').blur(function() {
      addPointer();
    });
    $('#cssmenu ul li').blur(function() {
      addPointer();
    });
});
function addPointer(){
    $('#menu-indicator').removeAttr('style');
    $('.menu-indicator').removeAttr('style');
    if(anchor_name == 'O nás'){
        $('#menu-indicator').stop();
        $('.menu-indicator').stop();
        $('#menu-indicator').attr('style', 'left: 622px;');
        $('.menu-indicator').attr('style', 'left: 622px;');
    }else if(anchor_name == 'Ceník') {
        $('#menu-indicator').stop();
        $('.menu-indicator').stop();
        $('#menu-indicator').attr('style', 'left: 713.5px;');
        $('.menu-indicator').attr('style', 'left: 713.5px;');
    }else if(anchor_name == 'Služby'){
        $('#menu-indicator').stop();
        $('.menu-indicator').stop();
        $('#menu-indicator').attr('style', 'left: 809px;');
        $('.menu-indicator').attr('style', 'left: 809px;');
    }else if(anchor_name == 'Kontakt'){
        $('#menu-indicator').stop();
        $('.menu-indicator').stop();
        $('#menu-indicator').attr('style', 'left: 912px;');
        $('.menu-indicator').attr('style', 'left: 912px;');
    }
}
</script>