Wie würde ich eine vertikale Version dieses horizontalen dynamischen Headers implementieren?

Question

Auf der Economist-Website gibt es eine horizontale Kopfzeile, die nur dann angezeigt wird, wenn Sie einmal die Seite herunterscrollen. Siehe hier:

http://www.economist.com/blogs/asiaview/2010/12/china_and_nobel_peace_prize

Was ich will, eine vertikale Version davon ist, das aus der linken oder rechten Seite der Seite und erweitert über den Seiteninhalt kommen würde, die bereits vorhanden ist.

Wer weiß von einem vorhandenen Plugin oder wie ich so etwas in jQuery bauen könnte?

Answer 1

Hier ist eine einfache jQuery-Plugin, das für Sie arbeiten sollten:

(function($) { 
    $.fn.scrollToast = function(options) { 
     var settings = options || {}; 
     var offset = settings.offset; 
     var toast = settings.toast; 
     var $toast = $(toast); 
     var hidden = true; 

     // prepare the toast: 
     $toast.css({ 
      display: 'none', 
      position: 'fixed', 
      top: '0px', 
      left: '0px', 
      zIindex: '1', 
      overflow: 'hidden' 
     }); 


     this.bind("scroll", function($event) { 
      var top = $(this).scrollTop(); 
      if ((top >= offset && hidden) || (top < offset && !hidden)) { 
       hidden = !hidden; 
       $toast.animate(
        {width: "toggle"});    
      } 
     }); 
    }; 
})(jQuery); 

Nutzungs: bis $(window).scrollToast({toast: "#toast", offset: 50});, wo #toast ist ein Selektor anzeigt, das Element heraus zu schieben, und offset ist, wie lange wollen Sie den Benutzer scrollen, bevor der Toast erscheint.

Hinweise:

• Verwendet CSS position:fixed und eine erhöhte z-index auf das Toast Element auf andere Inhalte erscheinen.
• Wenn das Zielelement auf einen Wert gleich oder über offset gescrollt wird, wird das Toast-Element herausgezogen (es ist zunächst ausgeblendet).
• Wenn das Zielelement auf einen Wert von weniger als offset der Toast Element in geschoben gescrollt zurück.
• leicht erweitert werden, um den Toast auf dem anderen Rande des Bildschirms oder der Ober- oder Unterseite zu zeigen.
• Funktioniert wahrscheinlich auf jedem scrollbaren Element, aber ich habe $(window) verwendet, weil es scheint, den Anwendungsfall, den Sie beschrieben, zu passen.

ein funktionsfähiges Beispiel Siehe hier: http://jsfiddle.net/andrewwhitaker/56dTA/

Answer 2

Ja, es ist ziemlich einfach zu bauen:

Sie erstellen:

<div id="hiddenmenu"> 
This Appears on scrolldown 
</div> 

Dieses div absolute positionend sein sollte, und display: none;

Mit der jQuery, auf Scroll-down verwenden Sie $('#hiddenmenu').show(); Das ist ziemlich viel, wenn Sie den vollständigen Code benötigen, einfach fragen, und ich werde es posten.