Come fare un div cartaceo con un tappo

Question

qualcuno può dirmi come viene chiamato questo effetto quando scendo su una pagina web e c'è una casella che all'inizio era nel mezzo della pagina ma in fondo è giù attaccato al lato del contenuto e ti segue anche in fondo alla pagina. lo vedo su Facebook e su molti siti web. Io non conosco un 'Div' perché questi rimangono fissi

dispiace ho dimenticato di scritto si muovono quando solo la parte superiore della pagina tocca loro

Answer 1

Da quello che ho capito, si desidera qualcosa di seguirvi come scorrimento verso il basso, ma in un primo momento era nel mezzo della pagina web. Si può fare con un po 'jQuery:

Example

tutorial

Answer 2

Il modo più semplice per riprodurre quel è quello di utilizzare un div con position: fixed; - lo farà attenersi alla sua posizione originale completamente su o giù per la pagina.

Quindi, se avete un div con il menù:

<div id="menu"> 
    <ul> 
    <li><a href="link1.htm">Link 1</a></li> 
    <li><a href="link2.htm">Link 2</a></li> 
    <li><a href="link3.htm">Link 3</a></li> 
    </ul> 
</div> 

È possibile personalizzare con

#menu { 
    position: fixed; 
    left: 250px; 
    top: 10px; 
} 

Answer 3

Hai solo bisogno di utilizzare alcuni css di base:

#fixed { 
    position:fixed; 
    right:0px; 
    top:150px; 
} 

Answer 4

Usando Javascript, potresti mettere un ascoltatore sulla finestra per scorrere l'evento e calcolare la distanza dalla fine del il div con pageYOffset o simile e quindi applica css per rendere fisso quel div quando la barra di scorrimento raggiunge quella posizione.

EDIT

Solo per il divertimento, con jQuery;

e nel CSS;

#div { 
    position:absolute; 
    top: 150px; 
    -webkit-transition: top 1s ease-in-out; 
} 

questo dovrebbe funzionare

Answer 5

Ecco un tutorial che ho trovato che ti dice come fare esattamente questo.

Qui è una questione simile: How do I get a floating footer to stick to the bottom of the viewport in IE 6?

e un tutorial che spiega utilizzando jQuery. http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/