Come rendere un elemento falso posizione: fisso in modo che agisca fisso fino a una certa altezza di scorrimento, quindi si attacca?

Question

Un numero di siti Web ha una funzione, in cui un elemento appare fisso sulla pagina mentre scorri fino a quando non colpisci un determinato punto, come la fine di una barra laterale, e poi si ancora alla parte inferiore della barra laterale. Una volta che si esegue il backup, inizia a comportarsi come un elemento fisso, rimanendo sullo schermo mentre si scorre.

Come si chiama questo e come è fatto?

Answer 1

È possibile impostare la posizione su evento di scorrimento assoluto e collegato alla pagina e in tal caso si modifica il valore css superiore in base alla posizione della barra di scorrimento (in jQuery è scrollTop in puro javascript dovrebbe essere simile) e quindi si aggiunge condizione quella cima è cambiata solo se scrollTop è inferiore al valore specifico come offset.top + altezza della barra laterale.

Answer 2

È possibile utilizzare https://github.com/wduffy/jScroll ma so che non è esattamente quello che stai cercando, c'è un ritardo tra lo scorrimento e il div in vista, deve costantemente recuperare.

la radice del codice è jQuery's .scroll() handler, quindi è un buon punto di partenza. Per quanto ne so, non esiste un nome ufficiale per questo effetto, ma ho visto che descrive così tanti posti, ora che qualcuno vuole saperlo non riesco a trovarlo!

EDIT Ecco quello che cercavo: Persistent Headers on CSS-Tricks

le basi della tecnica di Chris Coyier sono HTML:

<article class="persist-area"> 
    <h1 class="persist-header"> 
    <!-- stuff and stuff --> 
</article> 

css:

.floatingHeader { 
    position: fixed; 
    top: 0; 
    visibility: hidden; 
} 

e jQuery:

function UpdateTableHeaders() { 
    $(".persist-area").each(function() { 

     var el    = $(this), 
      offset   = el.offset(), 
      scrollTop  = $(window).scrollTop(), 
      floatingHeader = $(".floatingHeader", this) 

     if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) { 
      floatingHeader.css({ 
      "visibility": "visible" 
      }); 
     } else { 
      floatingHeader.css({ 
      "visibility": "hidden" 
      }); 
     }; 
    }); 
} 

// DOM Ready 
$(function() { 

    var clonedHeaderRow; 

    $(".persist-area").each(function() { 
     clonedHeaderRow = $(".persist-header", this); 
     clonedHeaderRow 
     .before(clonedHeaderRow.clone()) 
     .css("width", clonedHeaderRow.width()) 
     .addClass("floatingHeader"); 

    }); 

    $(window) 
    .scroll(UpdateTableHeaders) 
    .trigger("scroll"); 

}); 

Answer 3

Ascoltare l'evento di scorrimento, quando si scorre oltre l'elemento che si desidera mantenere in vista si modifica gli elementi in cui è la posizione di 'fixed'.

Ho creato un jsFiddle che illustra questo: http://jsfiddle.net/luisperezphd/EcsS6/

Ci sono un paio di cose da tenere a mente per esempio, un elemento fisso sarà posto rispetto alla finestra o il primo genitore con un position: relative.

In secondo luogo quando si modifica un elemento in fixed si riduce lo spazio in cui si trovava prima che il contenuto sottostante si spostasse verso l'alto. Se vuoi che l'effetto appaia liscio devi mettere qualcosa al suo posto che occupa la stessa quantità di spazio che ha fatto.

Nell'esempio jsFiddle l'ho realizzato avvolgendo l'elemento di intestazione all'interno di un altro elemento e impostandone l'altezza in modo che corrisponda (programmaticamente). Ci sono diversi modi in cui puoi averlo realizzato.

Includerò anche il codice seguente, nel mio esempio utilizzo jQuery.

JavaScript:

var $header = $("#header"); 
var HeaderOffset = $header.position().top; 
$("#headerContainer").css({ height: $header.height() }); 

$("#container").scroll(function() { 
    if($(this).scrollTop() > HeaderOffset) { 
     $header.addClass("fixedTop"); 
    } else { 
     $header.removeClass("fixedTop"); 
    } 
}); 

CSS:

#containerParent { 
    position: relative; 
    width: 180px; 
} 

#container { 
    height:200px; 
    overflow:auto; 
} 

#header { 
    background:black; 
    color:white; 
    width: 100%; 
} 

.fixedTop { 
    position: absolute; 
    top: 0; 
} 

HTML di esempio:

<h1>Fixed Position Header - after a point</h1> 
<div id="containerParent"> 
    <div id="container"> 
     This text is an example of content that might occur before the header. 
     <div id="headerContainer"> 
      <div id="header">Header</div> 
     </div> 
     <div> 
      Below is enough content to trigger scrolling. 
      line 1 <br/> 
      line 2 <br/> 
      line 3 <br/> 
      line 4 <br/> 
      line 5 <br/> 
      line 6 <br/> 
      line 7 <br/> 
      line 8 <br/> 
      line 9 <br/> 
      line 10 <br/> 
      line 11 <br/> 
      line 12 <br/> 
      line 13 <br/> 
      line 14 <br/> 
      line 15 <br/> 
     </div> 
    </div> 
</div>