Portál AbcLinuxu, 9. května 2025 02:38

Dotaz: Problém s jQuery lavalamp efektem

28.8.2015 16:43 hynaiis
Problém s jQuery lavalamp efektem
Přečteno: 186×
Odpovědět | Admin
Dobrý den,snažím se udělat lavalamp efekt v menu na stránkách www.idealcars.cz, bohužel nejsem zrovna profík co se jQuery týče... Povedlo se mi udělat to tak, že při kliknutí na odkazy to funguje parádně, horší to je ale co se týče scrollování. Tam funguje jen že se daný odkaz označí jako "aktivní", ale už se tam nepřesune ta šipka. Níže přikládám js kód právě na tu šipku, problémová část je funkce scrollOn.. Díky moc za každou radu!

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;
	
		});

Nástroje: Začni sledovat (0) ?Zašle upozornění na váš email při vložení nového komentáře.

Na otázku zatím nikdo bohužel neodpověděl.

Založit nové vláknoNahoru

Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.