Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Pagina 2 van 2 EersteEerste 1 2
Weergeven resultaten 21 tot 36 van 36

Onderwerp: Scroll naar sectie kleur aanpassen

  1. #21
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  2. #22
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    Hoi @bron, weet je wat ik nog zou kunnen aanpassen aan het script om het werkend te krijgen? Thanks!

  3. #23
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  4. #24
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    Goedemorgen @bron! Ik leg het vast niet goed uit, het stond bij opmerking #20.

    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è

  5. #25
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  6. #26
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    Dan ben ik helemaal abuis @bron , ik ga het meteen checken...

  7. #27
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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 aangepast door bron : 3 februari 2021 om 14:50
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  8. #28
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    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.

  9. #29
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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 aangepast door bron : 3 februari 2021 om 14:54
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  10. #30
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Probeer eens het linkje 'sectie 2' op de Home pagina te veranderen in
    href="https://www.albushosting.nl/wptest/test/index.php#sectie02"
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  11. #31
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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 aangepast door bron : 3 februari 2021 om 15:28
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  12. #32
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    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>

  13. #33
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    @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>

  14. #34
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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
    Bijgevoegde bestanden Bijgevoegde bestanden
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  15. #35
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    Hartstikke fijn @bron! Ik ga het uitproberen en kom erop terug. Net gefotografeerd buiten in de sneeuw, nu opwarmen aan de computer

  16. #36
    Mega Senior damnsharp's avatar
    Geregistreerd
    6 januari 2012
    Locatie
    Oss
    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

  17. Dit topic is automatisch gesloten omdat er sinds vier maanden niet meer op gereageerd is.

    Indien gewenst kan de topicstarter een verzoek tot heropening indienen.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl

Regels
Help

Helpmij.nl en business

Partners
Sponsoren