Scroll naar sectie kleur aanpassen

Status
Niet open voor verdere reacties.
Goeiemiddag damnsharp. Als je vanaf Home een url hebt
/wptest/test/ dan ga je naar de top van de Test pagina
/wptest/test/#sectie02 dan ga je naar sectie 2 van de Test pagina

Dit werkt. Of begrijp ik je vraag niet goed?

Als je van Home naar Test#sectie02 gaat heb je geen "smooth" scroll, helaas dat is niet anders.
 
Hoi @bron, weet je wat ik nog zou kunnen aanpassen aan het script om het werkend te krijgen? Thanks!
 
Maar de test pagina werkt toch? In Chrome, FF en Opera getest, of bedoel je iets speciaals wat niet werkt?
Het is een minimaal script, niet met visuele effecten ofzo.
 
Goedemorgen @bron! Ik leg het vast niet goed uit, het stond bij opmerking #20. :eek:

Als ik vanaf de Home pagina op bijvoorbeeld het 2e linkje (voor sectie02) klik dat ga naar de test pagina en kom uit op sectie02, maar er veranderd niets in de positie waar ik uit kom. Dat zou toch nu moeten met dat aangepast script? Want ik moet nu een stukje omhoog nu scrollen om titel "sectie02" te zien.

Helderder? En bedankt hè :thumb:
 
RE #20. als ik vanaf Home naar de test pagina veranderd er niets in de positie waar ik uit kom. Dat zou toch nu moeten met dat aangepast script?
In je vraag begrijp ik niet helemaal wat je bedoelt met 'veranderd er niets in de positie waar ik uit kom'. Als ik op de Home pagina op linkje /test/#sectie02 klik dan komt <div id="sectie02"> bovenaan de Test pagina. Dan scrollt de pagina iets naar beneden door window.scrollTo(0,10), dit is 10px. Hierdoor valt het woord 'sectie02' onder het menu. Verder lijkt alles goed te werken.
 
Dan ben ik helemaal abuis @bron :rolleyes:, ik ga het meteen checken...
 
Net zag ik bij elke sectie een scrollTo. Misschien is eerst een scrollIntoView handiger (niet getest)
Code:
if (hash == '#sectie01') {
    document.getElementById("sectie01").scrollIntoView();
    window.scrollTo(0, 40);
} else if (hash == '#sectie02') {
    document.getElementById("sectie02").scrollIntoView();
    window.scrollTo(0, 40);
} else if (hash == '#sectie03') {
    document.getElementById("sectie03").scrollIntoView();
    window.scrollTo(0, 40);
} else {
    // geen hash, dan naar default sectie
    document.getElementById("sectie01").scrollIntoView();
    window.scrollTo(0, 40);
}

Hetzelfde maar dan met functie (iets overzichtelijker)
Code:
function scrollToId (id, yOffset) {
    document.getElementById(id).scrollIntoView();
    window.scrollTo(0, yOffset);
}
     if (hash == '#sectie01') scrollToId('sectie01', 40);
else if (hash == '#sectie02') scrollToId('sectie02', 40);
else if (hash == '#sectie03') scrollToId('sectie03', 40);
else scrollToId('sectie01', 40); // else to default
 
Laatst bewerkt:
Tsja... ik merk er toch niets van, nu de waardes zo ingesteld:
sectie01 window.scrollTo(0, 50);
sectie02 window.scrollTo(0, 250);
sectie03 window.scrollTo(0, 350);

Bij sectie01 kom ik vanaf Home bij Morbi ullamcorper terecht en dat veranderd niet als ik de waarde aan pas.
Heb 3 verschillende browsers geprobeerd.
 
Momentje, ik kopieer jouw pagina even naar lokaal.

Vraagje: doe je bij elke verandering telkens een harde refresh (Ctrl F5) zodat alles op zeker van de server wordt geladen (ipv uit de browser cache)?
 
Laatst bewerkt:
Probeer eens het linkje 'sectie 2' op de Home pagina te veranderen in
href="https://www.albushosting.nl/wptest/test/index.php#sectie02"
 
Je vraagt buiten de (function(){ ... })(); de waarde van hash maar buiten de functie is die onbekend.
Maak er even dit van //console.log(hash);

of zet deze regel in de functie, vlak boven de functie afsluiting.
Code:
//  ...........
    });
    console.log(hash)
})();
</script>
 
Laatst bewerkt:
Goedemorgen @bron, dank voor je berichtjes maar merk geen verschil. Ik zal de code delen misschien is dan een oorzaak te vinden dat ik wat fout erin heb gezet:
Code:
<script>
(function () {
	// Javascript scroll to anchor other page v3 code via helpmij van bron
	// invullen: classname (zonder punt) van het actieve menu item
	var currentClass = "active-section";

	// invullen: selecteer alle <a> menu items voor de secties (css selector)
	var menuItems = document.querySelectorAll("#stickymenu a");

	// invullen: één item is standaard `currentClass` (css selector)
	var defaultItem = document.querySelector("#stickymenu a:first-child");

	// hash gedeelte in de url, bijv. #sectie02
	var hash = window.location.hash;

if (hash == '#sectie01') {
    document.getElementById("sectie01").scrollIntoView();
    window.scrollTo(0, 40);
} else if (hash == '#sectie02') {
    document.getElementById("sectie02").scrollIntoView();
    window.scrollTo(0, 40);
} else if (hash == '#sectie03') {
    document.getElementById("sectie03").scrollIntoView();
    window.scrollTo(0, 40);
} else {
    // geen hash, dan naar default sectie
    document.getElementById("sectie01").scrollIntoView();
    window.scrollTo(0, 40);
}

	if (hash != '' && hash != '#') {
			// doorloop alle menu items
			menuItems.forEach(function(item, index) {
					// waar staat de # in de href
					var n = item.href.indexOf('#');
					// geef class `currentClass` als hash hetzelfde is
					if (item.href.substr(n) == hash) {
							item.classList.add(currentClass);
					}
			});
	} else {
			// geen hash in de url, zet dan default item actief.
			defaultItem.classList.add(currentClass);
	}	

	// doorloop alle menu items
	menuItems.forEach(function(item, index) {
			// zet een `click` event op elke menu item
			item.addEventListener("click", function(event) {
					// verwijder bij alle menu items de `currentClass`
					menuItems.forEach(function(item, index) {
							item.classList.remove(currentClass);
					});
					// zet een `currentClass` op het geklikte item
					this.classList.add(currentClass);
			});
	});
//  ...........
    });
    console.log(hash)
})();
</script>
 
@bron ik heb een script gevonden na tijd Googlen wat werkt! Alleen zou het graag met jouw script vanwege de kleurtjes willen combineren (zie jouw bericht #2). Is dat beide achter elkaar plakken of is dat te simpel gedacht?

Code:
<script>
	jQuery(function($) {
  $('a[href*="#"]:not([href="#"])').click(function() {
      var target = $(this.hash);
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 120
        }, 'linear');   
  });    
	if (location.hash){
    var id = $(location.hash);
	}
	$(window).load(function() {
  	if (location.hash){
    	$('html,body').animate({scrollTop: id.offset().top -120}, 'linear')
  	};
 	});
})(jQuery);
</script>
 
In het script dat je in #32 hebt gepost zitten foutje(s). Het is teveel werk om #32 in #33, of omgedraaid te integreren.
In de bijlage heb ik al mijn snippets uit dit topic bij elkaar gevoegd.

Je zou kunnen googelen op een scroll spy, daarmee kan je een menu maken waarin wordt getoond in welke sectie je bent op de pagina.
Soms vind je complete fixed menu voorbeelden. Een scroll spy zit standaard in bootstrap, heb ik ooit gebruikt in een one-page whbe.nl
 

Bijlagen

  • fixednav.zip
    2 KB · Weergaven: 10
Hartstikke fijn @bron! Ik ga het uitproberen en kom erop terug. Net gefotografeerd buiten in de sneeuw, nu opwarmen aan de computer :D
 
Script werkt goed dus dat is fijn.
Als je van een andere pagina naar bijv #sectie02 gaat dan is het juiste menu item geselecteerd maar is het sticky menu iets te veel over de tekst. Dat is niet als je op de pagina zelf scrollt.
De code die ik heb werkt om de ene site goed en de andere niet. Dat laat ik nu zitten.

Kortom, mijn eerste vraag is opgelost dus ik zet de status op opgelost. Nogmaals dank @bron :thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan