Как установить положение индикатора на активной ссылке

Question

Добрый день, я пытаюсь заставить работать эффект jquery lavalamp, но я застрял в одной точке. Когда я нажимаю на элемент, он помечается как активный, он меняет цвет, но стрелка под меню не остается под активным и каждый раз возвращается со страницы. Вот мой код, где указано, что происходит со стрелкой при наведении курсора и во время активности. Я должен изменить настройки для активных, но я понятия не имею, как... Спасибо за все ваши советы! (кстати, страница с проблемой - http://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>