Ergebnis 1 bis 8 von 8
  1. #1
    svenmann ist offline Jungspund
    registriert
    30-05-2011
    Beiträge
    21

    Navigationsleiste fixieren

    Hallo zusammen,

    ich hoffe, dass ich hier richtig bin.

    Ich habe folgendes Problem.
    ich habe eine Navigationsleiste am unteren Bildschirmrand die beim nach oben scrollen "mitscrollen" soll und sich dann am oberen Rand "fixieren" soll.

    HTML-Code:
    <!-- Intro Section -->
    <section id="intro" class="intro-section full_intro">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            
          </div>
        </div>
      </div>
    </section>
    
    <!-- Blog Section -->
    <section id="navigation" class="nav-section">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
             1234
          </div>
        </div>
      </div>
    </section>
    Das sind die beiden Sections die zusammen 100% Bildschirmgröße ergeben.

    PHP-Code:
    <script type="text/javascript">
        var 
    menu document.getElementById'navigation' ),
            
    menufixed 0,
            
    logoHeight 100;
        
    window.onscroll onScroll;

        function 
    onScroll) {
            var 
    spy getScrollY();
            if ( 
    spy <= logoHeight ) {
                if ( 
    menufixed ) {
                    
    menu.style.position 'absolute';
                    
    menu.style.top '93%';
                    
    menufixed 0;
                }
            } else {
                if ( !
    menufixed ) {
                    
    menu.style.position 'fixed';
                    
    menu.style.top '0px';
                    
    menufixed 1;
                }
            }
        }
        
    // source: http://www.ajaxschmiede.de/javascript/fenstergrose-und-scrollposition-in-javascript-auslesen/
        
    function getScrollY() {
            var 
    spy 0;
            if ( 
    typeof window.pageYOffset ) == 'number' )
                
    spy window.pageYOffset;
            else if ( 
    document.body && ( document.body.scrollLeft || document.body.scrollTop ) )
                
    spy document.body.scrollTop;
            else if ( 
    document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )
                
    spy document.documentElement.scrollTop;
            return 
    spy;
        }
    </script> 
    Das ist der dazugehörige Javascript Code.
    Habe ihn aus dem internet kopiert und einwenig angepasst, da ich mich in JS nicht sehr auskennt.


    Die Leiste Scrollt bis zu einem gewissen Punkt mit und macht dann einen Sprung an den oberen Bildschirmrand.
    wie kriege ich es hin dass die "Navi Sektion" sauber bis an den oberen Bildschirmrand scrollt und nicht "springt"?

    Danke schonmal im voraus
    Gruß Svenmann
    Geändert von mikdoe (16-02-2017 um 12:46 Uhr) Grund: Gelöst gesetzt

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Navigationsleiste fixieren

    Wie kommst du denn auf logoHeight = 100;? Wie hast du den Wert (100) spezifiziert?
    Hoffe ich konnte helfen

  3. #3
    svenmann ist offline Jungspund
    registriert
    30-05-2011
    Beiträge
    21

    AW: Navigationsleiste fixieren

    Wie gesagt, ich habe das JS nur kopiert.
    Ursprünglich stand der Wert auf 190. ich wollte sehen was passiert wenn ich ihn verändere.

    https://www.magix.info/de/forum/navi...ollt--1085974/

    hier habe ich den Code her.

    Gruß Svenmann

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Navigationsleiste fixieren

    Zitat Zitat von svenmann Beitrag anzeigen
    WiUrsprünglich stand der Wert auf 190. ich wollte sehen was passiert wenn ich ihn verändere.
    Und was hat sich bei deinem Versuch geändert?

    Bzw. hast du einen Link wo man sich das mal live anschauen kan?
    Geändert von miniA4kuser (15-02-2017 um 13:19 Uhr) Grund: Frage live Link...
    Hoffe ich konnte helfen

  5. #5
    svenmann ist offline Jungspund
    registriert
    30-05-2011
    Beiträge
    21

    AW: Navigationsleiste fixieren

    Verändert hat sich nix.
    Ich habe das Projekt aktuell nur über MAMP laufen
    Kann es aber später auch mal auf meinen Test Server laden.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Navigationsleiste fixieren

    Tausch' die 100 mal durch document.getElementById("intro").offsetHeight.

  7. #7
    svenmann ist offline Jungspund
    registriert
    30-05-2011
    Beiträge
    21

    AW: Navigationsleiste fixieren

    Es hat geklappt!!
    Vielen vielen Dank!!

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Navigationsleiste fixieren

    Zitat Zitat von svenmann Beitrag anzeigen
    Vielen vielen Dank!!
    Bitte - gern geschehen.

Ähnliche Themen

  1. Navigationsleiste - Nach Scroll fixieren
    Von Beta17 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 24-06-2015, 07:08
  2. Content Fixieren
    Von hunter09 im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 08-01-2014, 22:36
  3. Bereich fixieren
    Von Schneider im Forum JavaScript
    Antworten: 29
    Letzter Beitrag: 12-08-2005, 12:09
  4. Frames Fixieren
    Von mask14 im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 04-09-2002, 00:07
  5. Werbebanner fixieren
    Von Kraus im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 07-06-2001, 16:01

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •