Ankündigung

Einklappen
Keine Ankündigung bisher.

Klasse beim klicken auf Button togglen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Klasse beim klicken auf Button togglen

    Hallo Zusammen,

    ich hab auf meiner Website einen Button eingebaut, welcher beim runterscrollen erscheint. Gleichzeitig verschwinden die Menüpunkte und der Header wird kleiner. Klick man nun auf den Button, soll der Header wieder maximieren, also die Klasse top-nav-collapse wieder entfernt werden, damit die Standardformatierung wieder greift. Da ich in Javascript leider noch kaum Erfahrungen hab, wollte ich euch um eure Hilfe bitten.

    Der Button im Header:
    HTML-Code:
    <button id="navTrigger" class="hamburger" tabindex="-1">
            <span>toggle menu</span>
        </button>
    Javascript:
    Code:
    function remove_class(e) {
      e.preventDefault(), windowWidth >= desktop ? nav.mainHeader.toggleClass("top-nav-collapse") : (nav.openClose.showNav.commonElements.toggleClass("active"), nav.openClose.cutHeight(windowHeight))
    }
    Das war ein kleiner versuch von mir, klappt aber leider nicht.

    Danke für eure Hilfe

    LG

  • #2
    Hast du es schon mit jQuery probiert?

    Code:
    $("button#navTrigger").on("click",function(){
        $("").toggleClass("top-nav-collapse");
        // Wenn die Klasse bei jedem Klick getoggelt werden soll
       // oder
    
      $("").removeClass("top-nav-collapse");
        // Wenn die Klasse beim Klick entfernt werden soll
    });
    http://api.jquery.com/category/manip...ass-attribute/

    Kommentar


    • #3
      Zitat von eT18 Beitrag anzeigen
      Hast du es schon mit jQuery probiert?

      Code:
      $("button#navTrigger").on("click",function(){
      $("").toggleClass("top-nav-collapse");
      // Wenn die Klasse bei jedem Klick getoggelt werden soll
      // oder
      
      $("").removeClass("top-nav-collapse");
      // Wenn die Klasse beim Klick entfernt werden soll
      });
      http://api.jquery.com/category/manip...ass-attribute/
      Perfekt! Es hat funktioniert Nur hab ich jetzt das Problem, das ich wenn ich das Menü wieder eingeblendet habe und nach oben scrolle, das es wieder verschwindet. Ich will aber, das wenn ich hoch scrolle, dass es bleibt und sobald ich wieder runter scroll, verschwindet. So wie auf dieser Website: https://www.ingolstadtvillage.com/

      Mein Code zum Ändern der Klasse sieht so aus:
      Code:
      //jQuery to collapse the navbar on scroll
      jQuery(document).ready(function($) {
       $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
           //console.log(scroll);
          if (scroll >= 50) {
              //console.log('a');
              $(".site-header").addClass("top-nav-collapse");
          } else {
              //console.log('a');
              $(".site-header").removeClass("top-nav-collapse");
          }
      });
      });
      
      //ToggleClass
      jQuery(document).ready(function($) {
      $("button#navigationCollapse").on("click",function(){
          $("#masthead").toggleClass("top-nav-collapse");
      });
      });

      Kommentar


      • #4
        Du bist schon auf dem richtigen Weg, hier mal ein Beispiel als Denkanstoß (natürlich ohne jQuery....)

        HTML-Code:
        <!doctype html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <style>
        *{margin:0;padding:0;}
        .menu {
            display:block;
            background:#ddd;
            top:0px;
            width:100%;
            height:100px;}
        .menu-fixed{
          position:fixed;}
        .content-margin-top{
            margin-top:100px;}
        </style>
        <body>
        <div class = "menu">
          <h1>Menu</h1>
        </div>
        <p class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...........
        </p>
        <script>
        (function(){
            var aktScrollPos=document.body.scrollTop;
            var menuClassList=document.querySelector('.menu').classList;
            var contentClassList = document.querySelector('.content').classList;
            window.onscroll = function(){
              if(document.body.scrollTop < aktScrollPos){
                menuClassList.add("menu-fixed");
                contentClassList.add("content-margin-top");
              }
              if(document.body.scrollTop == 0){
                    contentClassList.remove("content-margin-top");
                    menuClassList.remove("menu-fixed");
                };
                aktScrollPos=document.body.scrollTop;
            };
            })();
        </script>
        </body>
        </html>

        Kommentar

        Lädt...
        X