How to set indicator position on active link

Question

Good afternoon, I'm trying to make jquery lavalamp effect working, but I've got stucked at one point. When I click on an item, it's marked as active, it changes color, but the arrow under menu doesn't stay under the active one and every time returns out of the page. There is my code, where is set what happens with arrow while hover and while active. I must edit settings for active, but I have no idea how... Thanks for all your advices! (btw. page with problem - www.idealcars.cz)

EDIT: OK I've solved problem with arrow place after click, but there is still issue that arrow doesn't change her place during scrolling.

Here is my code now, the "scroll" part doesn't work.. Any help please?

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

Hi @Hynek I have done some fixes in your script as per your previous question (that was deleted)try with the following script hope this might help.

<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>