Javascript, um eine feste navbar funktioniert nicht

http://www.new.techmoney360.com/ ist die Website und es wird mit WordPress entwickelt.Javascript, um eine feste navbar funktioniert nicht

Diese Navigationsleiste ist Teil der <header>, die auch mein Logo Abschnitt oben umfassen, so dass ich nicht sicher bin, ob das Probleme verursacht.

Dies ist das gesamte HTML das umfasst die Navigationsleiste, die ich an der Spitze bleiben möchte, wenn ich vorbei blättern.

<div id="navmenu" class="mkd-menu-area"> 
    <div class="mkd-grid"> 
     <div class="mkd-vertical-align-containers"> 
      <div class="mkd-position-left"> 
       <div class="mkd-position-left-inner"> 
        <?php if(is_active_sidebar('mkd-left-from-main-menu')) : ?> 
         <?php dynamic_sidebar('mkd-left-from-main-menu'); ?> 
        <?php endif; ?> 
        <?php discussion_get_main_menu(); ?> 
       </div> 
      </div> 
      <div class="mkd-position-right"> 
       <div class="mkd-position-right-inner"> 
        <?php if(is_active_sidebar('mkd-right-from-main-menu')) : ?> 
         <?php dynamic_sidebar('mkd-right-from-main-menu'); ?> 
        <?php endif; ?> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Dies ist Javascript Ich bin mit der Navigationsleiste (dank akinuri für das Skript)

window.onscroll = changePos; 

function changePos() { 
    var header = document.getElementById("navmenu"); 
    if (window.pageYOffset > 182) { 
     header.style.position = "absolute"; 
     header.style.top = pageYOffset + "px"; 
    } else { 
     header.style.position = ""; 
     header.style.top = ""; 
    } 
}

Quelle

2016-06-01 Robolisk

brauche kein Javascript, nur css: #navmenu {position: fixed} – Jacob

@Jacob - OP will es halten, wenn es ein wenig gescrollt hat, nicht immer. –

Hat niemand bemerkt, dass die beiden JavaScript-Fehler auf der Website ausgelöst wurden, die (wahrscheinlich) die Ursache für zumindest einen Teil des Problems sind? –

@Jacob ist teilweise korrekt, Sie benötigen (so viel) JavaScript hier nicht. So können Sie das Problem beheben. Ersetzen Sie die aktuelle Funktionalität mit diesem:

window.onscroll = stickyNav; 

function stickyNav() { 
    var header = document.getElementById("navmenu"); 
    if (window.pageYOffset > 70) { 
     header.classList.add("sticky"); 
    } else { 
     header.classList.remove("sticky"); 
    } 
}

Dann eine neue Klasse erstellen .sticky mit folgenden Styling Anpassungen genannt:

.sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

Edit: Update stickNav zu stickyNav.

Quelle

2016-06-01 19:14:11

hmmm tun. Ich sehe, was du hier machst, aber das scheint aus irgendeinem Grund nicht zu funktionieren. – Robolisk

Ich habe es ein wenig bearbeitet, um ein Leerzeichen in den Zusatz 'if' className einzufügen, der möglicherweise ein Problem verursacht hat. Sehen Sie, ob das hilft. Ansonsten lassen Sie mich wissen, welche Probleme Sie sehen. –

Ich habe hinzugefügt, Sie bearbeiten mit dem Leerzeichen vor dem Sticky (Ich kopiere eingefügt, Sie sind ganze Änderungen) und nichts geändert. Die Navigationsleiste wird überhaupt nicht mehr repariert. Wo als das Javascript, das ich vor arbeitete, verwendete, machte es gerade die Bar alle unordentliches Schauen. Ich verstehe, was Sie tun, und ich sehe, wie es richtiger ist. – Robolisk

Platz .mkd-top-bar außerhalb aller Wrapper und so weiter zum Ziel, legen Sie sie unter dem <body> und in seiner CSS anwenden position: fixed;

.mkd-top-bar { 
    background-color: #303030; 
    position: fixed; 
}

Ist das, was Sie suchen?

Quelle

2016-06-01 18:49:37

das ist ein Teil davon, es war tatsächlich meine nächste Herausforderung zu tun. Momentan versuche ich nur, dass mein Navigationsmenü/Balken oben bleibt und das ist es, was der Beitrag hauptsächlich mit – Robolisk

in Verbindung bringt. Ah okay, ich würde meine Antwort bearbeiten, aber ich glaube [ghost_dad Answer] (http: // stackoverflow.com/a/37576987/6410837) sollte den Trick –

Javascript, um eine feste navbar funktioniert nicht

Antwort

Verwandte Themen