webentwicklung-frage-antwort-db.com.de

Sticky Header nach dem Scrollen nach unten

Ich habe diesen Sticky-Header auf dieser Website gesehen: http://dunked.com/(nicht mehr aktiv, Archivierte Site anzeigen )

Wenn Sie nach unten scrollen, wird der Sticky-Header von oben angezeigt.

Ich habe mir den Code angesehen, aber er sieht sehr kompliziert aus. Ich verstehe das nur: Der normale Header wurde mit JS geklont und wenn Sie die Seite nach unten scrollen, wird er von oben animiert.

26
sascha

Hier ist ein Anfang. Grundsätzlich kopieren wir den Header beim Laden und überprüfen (mit .scrollTop() oder window.scrollY), ob der Benutzer einen Bildlauf über einen Punkt (z. B. 200 Pixel) hinaus ausführt. Dann schalten wir einfach eine Klasse um (in diesem Fall .down), die das Original in Sichtweite bringt.

Zuletzt müssen wir nur noch einen transition: top 0.2s ease-in auf unseren Klon anwenden, damit er im Zustand .down angezeigt wird. Dunked macht es besser, aber mit ein bisschen Herumspielen ist es einfach zu konfigurieren

CSS

header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

entweder Vanille JS (Polyfill nach Bedarf)

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

oder jQuery

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

Neuere Überlegungen

Während das Obige die ursprüngliche Frage des OP von "Wie erreicht Dunked diesen Effekt?" beantwortet, würde ich diesen Ansatz nicht empfehlen. Für den Anfang kann das Kopieren der gesamten Top-Navigation ziemlich kostspielig sein, und es gibt keinen wirklichen Grund, warum wir das Original nicht verwenden können (mit ein wenig Arbeit).

Darüber hinaus haben Paul Irish und andere geschrieben , wie das Animieren mit translate() besser ist als das Animieren mit top. Es ist nicht nur leistungsfähiger, sondern es bedeutet auch, dass Sie die genaue Höhe Ihres Elements nicht kennen müssen. Die obige Lösung würde mit dem folgenden (Siehe JSFiddle) modifiziert:

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

Der einzige Nachteil bei der Verwendung von Transformationen ist, dass Sie, obwohl Browser-Unterstützung ist ziemlich gut , wahrscheinlich Versionen mit Herstellerpräfix hinzufügen möchten, um die Kompatibilität zu maximieren.

61
Ian Clark

Hier ist eine JS-Geige http://jsfiddle.net/ke9kW/1/

Wie die anderen sagen, setzen Sie den Header auf "fixed" und beginnen Sie mit der Anzeige: none

dann jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

dabei ist 200 die Höhe in Pixeln, um die es verschoben werden soll. Das Hinzufügen der offenen Klasse ermöglicht es uns, ein elseif statt nur eines anderen auszuführen, sodass ein Teil des Codes nicht unnötig auf jedem Scrollevent ausgeführt wird

10
joevallender

Hier ist eine Liste von jQuery-Plugins, die einen ähnlichen Effekt erzielen werden: http://jquery-plugins.net/tag/sticky-scroll

2
eagor

Ich schlage vor, klebrige Js zu verwenden, die beste Option, die ich je gesehen habe. nichts zu tun, nur diese js auf Sie 

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

und verwenden Sie den folgenden Code:

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Sein Repo: https://github.com/garand/sticky

1
Shiv Singh

Ich habe die Funktion jQuery .scroll () verwendet, um das Ereignis des Bildlaufwerts der Symbolleiste mithilfe von scrollTop zu verfolgen. Ich verwendete dann eine Bedingung, um festzustellen, ob sie größer war als der Wert dessen, was ich ersetzen wollte. Im Beispiel unten war es "Ergebnisse". Wenn der Wert true war, fügte das Ergebnisetikett die Klasse 'fixedSimilarLabel' hinzu und die neuen Stile wurden dann berücksichtigt.

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

1
Franklyn Roth

Entprellung hinzufügen, um die Effizienz zu steigern http://davidwalsh.name/javascript-debounce-function

0
mrdnk

eine ähnliche Lösung mit Jquery wäre:

$(window).scroll(function () {
  $('.header').css('position','fixed');
});

Dadurch wird die Kopfzeile sofort beim Scrollen in ein festes Positionselement

0
Matt Saunders

fenster unten scrollen Sie mit Jquery nach oben.

 <script> 

 var lastScroll = 0;

 $(document).ready(function($) {

 $(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });
 </script>
0
Musaib Memdu

css:

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

JS:

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});
0
Anup

Bei Firefox funktionierte das nicht. 

Wir haben eine Bedingung hinzugefügt, die darauf basiert, ob der Code den Überlauf auf der HTML-Ebene platziert. Siehe Animate scrollTop funktioniert nicht in Firefox .

  var $header = $("#header #menu-wrap-left"),
  $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = Array(); 
    fromTop["body"] = $("body").scrollTop();
    fromTop["html"] = $("body,html").scrollTop();

if (fromTop["body"]) 
    $('body').toggleClass("down", (fromTop["body"] > 650));

if (fromTop["html"]) 
    $('body,html').toggleClass("down", (fromTop["html"] > 650));

  });
0
Megan