Wie fix einen header auf scroll

Habe ich geändert, die Coop Antwort. Bitte überprüfen Sie die Beispiel FIDDLE
Hier meine änderungen:

$(window).scroll(function(){
  if ($(window).scrollTop() >= 330) {
    $('.sticky-header').addClass('fixed');
   }
   else {
    $('.sticky-header').removeClass('fixed');
   }
});

InformationsquelleAutor der Antwort Mobeen Abdullah

Coop Antwort ist ausgezeichnet.

Aber es hängt davon ab, jQuery, hier ist eine version, die keine Abhängigkeiten:

HTML

<div id="sticky" class="sticky"></div>

CSS

.sticky {
  width: 100%
}

.fixed {
  position: fixed;
  top:0;
}

JS

(Dies verwendet eyelidlessness Antwort für das finden von offsets in Vanilla JS.)

function findOffset(element) {
  var top = 0, left = 0;

  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
}

window.onload = function () {
  var stickyHeader = document.getElementById('sticky');
  var headerOffset = findOffset(stickyHeader);

  window.onscroll = function() {
    //body.scrollTop is deprecated and no longer available on Firefox
    var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (bodyScrollTop > headerOffset.top) {
      stickyHeader.classList.add('fixed');
    } else {
      stickyHeader.classList.remove('fixed');
    }
  };
};

Beispiel

https://jsbin.com/walabebita/edit?html,css,js,output

InformationsquelleAutor der Antwort RubenSandwich

Coops Antwort ist eine gute, einfache Lösung, die jedoch, sobald Sie die Feste Klasse die Seite wird, die viel kürzer und Inhalt "springt", und wenn eine Seite hat eine Länge, wo das scroll-Abstand ist kleiner als die Höhe des header-element, es wird angezeigt, um zu springen und lassen Sie nicht sehen, der unten auf der Seite.

Die Antwort, die ich fand, war, fügen Sie eine spacer-div-Element über dem element, das wird behoben (nav-element in meinem Fall), und legen Sie es auf die gleiche Höhe wie die nav-element, und legen Sie es auf display none.

Beim hinzufügen der .Feste Klasse auf der nav Karte die .nav-spacer-div, und wenn es zu entfernen, zu verstecken. Da die Höhe der Seite, werden die änderungen sofort habe ich die Dauer auf 0 gesetzt.

HTML

<header>the element above the element that will become fixed</header>
<div class="nav-spacer"></div>
<nav></nav>

CSS

nav {
    position: relative;    
    height: 100px;
}
.nav-spacer{
    position: relative;
    height: 100px;
    display: none;
}
.fixed {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    /* I like to add a shadow on to the fixed element */
    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
}

JavaScript

var stickyOffset = $('nav').offset().top;

$(window).scroll(function(){
    if ($(window).scrollTop() >= stickyOffset){
        $('nav').addClass('fixed');
        //this makes the page length equal to what it was before fixing nav
        $('.nav-spacer').show(0); 
    }
    else {
        $('nav').removeClass('fixed');
        $('.nav-spacer').hide(0);
    }
});

InformationsquelleAutor der Antwort Craig Jacobs

Die gewählte Lösung nicht zu dem passte gut in meine Seite. So ist dies eine erweiterte version, die funktioniert mit bootstrap.

Die javascript -

var stickyOffset = $('.sticky-header').offset().top;

$(window).scroll(function () {
    var sticky = $('.sticky-header'),
        scroll = $(window).scrollTop(),
        header = $('.fixed-header-background');
    sticky.each(function() {
        var left = $(this).offset().left;
        $(this).data('left', left);//I store the left offset
    });

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
        header.css('display', 'block');
        sticky.each(function() {
            $(this).css('left', $(this).data('left'));//I set the left offset
        });
    } else {
        sticky.removeClass('fixed');
        header.css('display', 'none');
        sticky.each(function () {
            $(this).css('left', '');//I remove the left offset
        });
    }
});

Die CSS -

.fixed-header-background {
    display: none;
     position: fixed;
    top: 50px;
    width: 100%;
    height: 30px;
    background-color: #fff;
    z-index: 5;
    border-bottom-style: solid;
    border-bottom-color: #dedede;
    border-bottom-width: 2px;
}

.fixed{
     position: fixed;
    top: 52px;
    z-index: 6;
}

Und die HTML -

    <div class="fixed-header-background"></div>
<table class="table table-hover table-condensed">
        <thead>
            <tr>
                <th></th>
                <th><span class="sticky-header">My header 1</span></th>
                <th><span class="sticky-header">My header 2</span></th>
            </tr>
        </thead>
        <tbody>
[....]

        </tbody>
    </table>

InformationsquelleAutor der Antwort Daniel

Hoffentlich ist dies ein Stück von einer alternativen Lösung wird als wertvoll für jemand anderen, wie es bei mir war.

Lage:

In eine HTML5-Seite hatte ich ein Menü, das war ein nav-element innerhalb einer überschrift (nicht DER header, aber einen header in einem anderen element).

Ich wollte die navigation auf stick nach oben, sobald ein Benutzer gescrollt, aber vorher der Kopf war absolut positioniert (so hätte ich es overlay etwas anderes etwas).

Die oben genannten Lösungen nie ausgelöst wird, eine Veränderung da .offsetTop war nicht zu ändern, da dies war ein absolut positioniertes element. Zusätzlich werden die .scrollTop-Eigenschaft wurde einfach die Spitze des obersten Elements... das heißt 0 und würde es immer 0 sein.

Alle tests, die ich durchgeführt unter Verwendung dieser beiden (und gleichzeitig mit getBoundingClientRect Ergebnisse) würde mir nicht sagen, wenn die Obere Navigationsleiste immer gescrollt werden, um den oberen Rand der sichtbaren Seite (wieder, wie berichtet, in der Konsole, Sie blieben die gleichen zahlen beim scrollen aufgetreten ist).

Lösung


Die Lösung war für mich die Verwendung

window.visualViewport.pageTop

Den Wert der pageTop Eigenschaft spiegelt den sichtbaren Bereich des Bildschirms, daher erlauben Sie mir, zu verfolgen, wo ein element ist in Bezug auf die Grenzen des sichtbaren Bereichs.

Dies erlaubt eine einfache Funktion zugewiesen, das scroll-Ereignis des Fensters zu erkennen, wenn die Obere Navigationsleiste durchschnitten, die Spitze der sichtbaren Fläche auftragen und das styling zu machen, stick an die Spitze.

Wohl unnötig zu sagen, immer wenn ich bin den Umgang mit scrollen ich erwarte, dass diese Lösung verwenden, um programmgesteuert reagieren, um die Bewegung der Elemente wird gescrollt.

Hoffe es hilft jemand anderem.

InformationsquelleAutor der Antwort MER