0

こんにちは、私はjqueryのlavalamp効果を働かせようとしていますが、ある時点で立ち往生しています。アイテムをクリックすると、アクティブとしてマークされ、色が変わりますが、メニューの下の矢印はアクティブな矢印の下にとどまらず、毎回ページから戻ります。ホバー中およびアクティブ中に矢印で何が起こるかが設定されている私のコードがあります。アクティブの設定を編集する必要がありますが、方法がわかりません... アドバイスありがとうございます。(ところで、問題のあるページ - www.idealcars.cz )

編集:OK、クリック後の矢印の場所の問題は解決しましたが、スクロール中に矢印の場所が変わらないという問題がまだあります。

これが私のコードです。「スクロール」部分が機能しません。何か助けてください。

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 に答える