Javascript o Jquery: scorri in posizione fissa div

Question

Voglio un div html che scorrerà quando l'utente scorrerà la pagina verso il basso e raggiungerà la posizione fissa quando termina il tag padre. Ad esempio: - Vedi questo link http://www.9gag.com/ hanno un sacco di messaggi su una pagina. Quando scorriamo un post e andiamo alla fine del primo post, i pulsanti title e share diventano in posizione fissa e quindi il secondo post fa lo stesso e lo stesso per i post successivi. Proprio esattamente così. Come possiamo farlo in Jquery o in javascript o in css.

Answer 1

$(window).scrollTop() ti darà il numero di pixel scansionati nel browser, $('postcontainer').offset() ti darà le posizioni x, y di un contenitore di posta.

Quindi se si associa un evento a $(window).scroll() o al file di registro, è possibile verificare se il numero di postcontainer offset().top è inferiore allo window.scrollTop. Se è così, inizi a spostare l'oggetto in basso rispetto al contenitore del post. Quando si esegue questa operazione è necessario tenere traccia dell'altezza del contenitore del post e dell'altezza dell'elemento mobile per assicurarsi che non scenda oltre il fondo del contenitore.

Quindi se postcontainer.height - movingelement.position().top >= movingelement.height() è necessario fissare la posizione dell'elemento mobile. Fai il contrario mentre scorri verso l'alto.

Speriamo che questo ti faccia riflettere e inizi a dare un po 'di codice.

Answer 2

Forse si vuole provare questo plugin: http://labs.anthonygarand.com/sticky/ Sticky è un plugin jQuery che ti dà la possibilità di rendere qualsiasi elemento sulla tua pagina sempre visibile facendo galleggiare l'elemento quando ha raggiunto il limite.

Answer 3

Questa è la soluzione per il tuo problema con una semplice proprietà css.

utilizzare position:sticky per seguire la pergamena.

Ecco l'articolo spiegato.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

e vecchio modo di fare questo demo

con sticky position demo