Jquery scrollTop och offset, highlighta meny?

2012-03-01 18:21

Permalänk

kon87

Medlem

Plats: i molnet
Registrerad: Okt 2005

●

Jquery scrollTop och offset, highlighta meny?

Hej!

Jag har stött på ett frustrerande problem:

Jag har en one-page layout med en "fixed" meny i toppen av sidan. Det finns fyra menyval som scrollar till olika delar av sidan med jquery, vilket fungerar felfritt. Nu vill jag lägga till en funktion som highlightar menyvalet man är på även när man scrollar manuellt. Så här har jag tänkt, men det fungerar inte:

	if($('#contact').offset() < $(document).scrollTop()) { // #contact är elementet som ett av menyvalen autoscrollar till. 
	
		$('.link-contact').css({
			'background' : 'url(wp-content/themes/theme/images/menu.bg.png)',
			'color' : '#999'
		
		});
	}

Tänker jag heltokigt eller varför fungerar det här inte?

Visa signatur

Asus Zenbook UX32VD-R4002V.

Rapportera Redigera

Citera flera Citera

2012-03-01 19:22

Permalänk

Yxskaftet

Medlem

Registrerad: Okt 2002

●

Du tänker heltokigt.
".offset() returns an object containing the properties top and left."
Du måste i så fall jämföra top i offset objektet med scrollTop().

Här är en annan lösning:
http://stackoverflow.com/questions/3893124/use-jquery-to-chan...

Senast redigerat 2012-03-01 19:28

Rapportera Redigera

Citera flera Citera

2012-03-01 20:10

Permalänk

kon87

Medlem

Plats: i molnet
Registrerad: Okt 2005

●

Skrivet av mel0dy:

Du tänker heltokigt.
".offset() returns an object containing the properties top and left."
Du måste i så fall jämföra top i offset objektet med scrollTop().

Här är en annan lösning:
http://stackoverflow.com/questions/3893124/use-jquery-to-chan...

Gå till inlägget

Kan jag inte få .offset() att returnera ett y-värde på något vis? Ska kika på länken, tack!

EDIT

Det här bör fungera för att få ett värde då: .offset().top;

Men när jag testar så returnerar scrollTop(); inget värde, vad kan vara fel här?

Senast redigerat 2012-03-01 20:17

Visa signatur

Asus Zenbook UX32VD-R4002V.

Rapportera Redigera

Citera flera Citera

2012-03-01 21:07

Permalänk

Cloudburst

Medlem

Registrerad: Apr 2006

●

Jag gjorde faktiskt detta själv på min site (du ser menyn i action på http://jisuo.se)

Scriptet har du här:

( function($) {

	var tick = 0;
	var scrollStop = 0;
	var $li = $('nav.navigation li');

	$(window).scroll(function() {
		tick++;
		clearTimeout(scrollStop);
		scrollStop = setTimeout(updateScrollInfo, 300);
		if(tick > 10) {
			updateScrollInfo();
		}
	});

	function updateScrollInfo() {
		tick = 0;
		if (isTop()) {
			$li.removeClass('selected');
			var $link = $('a.go-home');
			$link.parent().addClass('selected');
		} else if (isAbout()) {
			$li.removeClass('selected');
			var $link = $('a.go-about');
			$link.parent().addClass('selected');
		} else if (isContact()) {
			$li.removeClass('selected');
			var $link = $('a.go-contact');
			$link.parent().addClass('selected');
		}
	}

	function isTop() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#home').offset().top, elemBottom = elemTop + $('#home').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	function isAbout() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#about').offset().top, elemBottom = elemTop + $('#about').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	function isContact() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#contact').offset().top, elemBottom = elemTop + $('#contact').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	if (window.location.hash.substring(1).length) {
		$('nav.navigation li').removeClass('selected');
		var $link = $('a.go-' + window.location.hash.substring(1));
		$link.parent().addClass('selected');
	}

	$('nav.navigation').localScroll({
		duration : 1500,
		hash : true
	});

}(jQuery));

Det jag gör är att jag håller på koll på när jag scrollar och kollar kontinuerligt om jag är vid en viss del av siten.

Edit: Jag kollar även om man går direkt till en sektion och markerar då rätt menyval (lite haxigt) med location.hash

Senast redigerat 2012-03-01 21:29

Rapportera Redigera

Citera flera Citera

2012-03-03 13:05

Permalänk

kon87

Medlem

Plats: i molnet
Registrerad: Okt 2005

●

Skrivet av Cloudburst:

Jag gjorde faktiskt detta själv på min site (du ser menyn i action på http://jisuo.se)

Scriptet har du här:

( function($) {

	var tick = 0;
	var scrollStop = 0;
	var $li = $('nav.navigation li');

	$(window).scroll(function() {
		tick++;
		clearTimeout(scrollStop);
		scrollStop = setTimeout(updateScrollInfo, 300);
		if(tick > 10) {
			updateScrollInfo();
		}
	});

	function updateScrollInfo() {
		tick = 0;
		if (isTop()) {
			$li.removeClass('selected');
			var $link = $('a.go-home');
			$link.parent().addClass('selected');
		} else if (isAbout()) {
			$li.removeClass('selected');
			var $link = $('a.go-about');
			$link.parent().addClass('selected');
		} else if (isContact()) {
			$li.removeClass('selected');
			var $link = $('a.go-contact');
			$link.parent().addClass('selected');
		}
	}

	function isTop() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#home').offset().top, elemBottom = elemTop + $('#home').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	function isAbout() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#about').offset().top, elemBottom = elemTop + $('#about').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	function isContact() {
		var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $('#contact').offset().top, elemBottom = elemTop + $('#contact').height();
		return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	}

	if (window.location.hash.substring(1).length) {
		$('nav.navigation li').removeClass('selected');
		var $link = $('a.go-' + window.location.hash.substring(1));
		$link.parent().addClass('selected');
	}

	$('nav.navigation').localScroll({
		duration : 1500,
		hash : true
	});

}(jQuery));

Det jag gör är att jag håller på koll på när jag scrollar och kollar kontinuerligt om jag är vid en viss del av siten.

Edit: Jag kollar även om man går direkt till en sektion och markerar då rätt menyval (lite haxigt) med location.hash

Gå till inlägget

Oj, det var visst lite mer kod än vad jag hade skrivit :P. Nåja, tack för den!

Visa signatur

Asus Zenbook UX32VD-R4002V.

Rapportera Redigera

Citera flera Citera

2012-03-03 13:09

Permalänk

Cloudburst

Medlem

Registrerad: Apr 2006

●

Ja det kanske går att göra bättre, detta var bara det första jag kom på som funkade stabilt. Detta är ju även bundet till min DOM så det är inte speciellt generiskt just nu.

Rapportera Redigera

Citera flera Citera

Jquery scrollTop och offset, highlighta meny?

Jquery scrollTop och offset, highlighta meny?

Externa nyheter

Spelnyheter från FZ