Scriptfunktion

Markusli2018

Grünschnabel
Hallo Zäme
Kann ich in das folgende Script (siehe Anhang) für eine OnePager-Website anpassen das die Navigatipn immer wieder verschwindet und nicht stehen bleibt (da bei OnePager kein Seitenreload)?

Danke für eure Hilfe!
 

Anhänge

  • ScriptHUTAWA.txt
    1,2 KB · Aufrufe: 4
Vesrstehe gerade nix. Eine One page wird ja so gebaut das man den Content immer wieder nachladen tut und der rest stehen bleibt. Meistens bleibt ja die Navigation stehen.
Was macht den dein Script ? Besser ist es wenn du den Code hier postest weil kaum einer Anhänge runter laden tut . Was immer das Script auch tut , man kann es theoretisch bei jeden laden auch wieder neu laden.

Deshalb erklär mal bitte kurz was das Script macht und wie du es haben möchtest auf deiner One Page
 
Hallo Basti
Bei diesem OnePager wird leider nichts geladen, sonder bei Klick auf einen Navipunkt nur nach unten gescrollt. Da somit kein Seitenreload stattfindet bleibt die Navigation (insbesondere auf dem Handy nervig) stehen und verdeckt so Inhalt. Schön wäre es, wenn bei Klick gescrollt und die Hamburgernavigation einklappen würde.
Code:
// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      &&
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
 
Hast du das schon online ?
Es geht dir jetzt doch nur darum das das Menü ( hamburger ) wieder zuklappt nach dem es gescrollt hat richtig ?
Fals sich einer meldet der dir so helfen kann dann ist gut , nur ohne den rest zu kennen komme ich nicht weiter .Html und css wären zum vorteil oder Link zur Seite.

Wenn ich das jetzt richtig sehe brauch man ja nur die Css zu ändern nachdem es gescrollt hat um den Hamburger wieder zu schließen.Um das genau zu sagen wäre der rest Code schon besser.
 
Schöne Seite. Aber vom Code her sehr unübersichtlich und mit meinen mitteln brauche ich da mehr Zeit den Fehler zu finden warum der jetzt nicht schließt.

Wenn du eine Notlösung brauchst erstmal
dann Kopiere das Script irendwo nach weit unten in Code
Code:
<script>
$('.nav-item').click(function(){
$('.navbar-toggler').click();

})
</script>
Das Script bewirkt das nach den klick auf den Link automatisch nochmal auf den Hamburger geklickt wird und somit das Menü wieder schließt.
Konnte das jetzt nur mit Greasmonkey testen aber sollte trotzdem klappen.

Wie gesagt erstmal nee Notlösung die ohne probleme funktionieren sollte. Konnte jetzt nicht alleSeiten durchklicken aber da wo ich wahr gab es keine Konflikte oder so
 
Zurück