0

下午好，我正在尝试使 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;

        });
4

1 回答 1

0

嗨@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>
于 2015-08-27T12:46:43.610 回答