2010-10-24 7 views
4

Je voudrais créer un div, qui est situé sous un bloc de contenu, mais qu'une fois que la page a été suffisamment défilée pour entrer en contact avec sa limite supérieure, elle devient fixe et défile avec la page. Je sais que j'ai vu au moins un exemple de ceci en ligne mais je ne peux pas m'en souvenir pour la vie de moi.Comment faire un défilement div quand je défile après un certain point?

Des pensées?

+1

Peut être double de http://stackoverflow.com/questions/3964784/google-news-gauche-nav-css-trick-ou-jquery-trick/3965179 # 3965179 –

+0

voulez-vous pied fixe sorte de fonctionnalité, est donc nous pouvons réaliser que par css aussi sans écrire javascript – kobe

+1

Je veux un div qui est au m Quand je défile devant l'écran, je veux qu'il reste en haut de la fenêtre et reste là. Quand je remonte en haut, je veux qu'il colle à sa place d'origine. – infinity

Répondre

1

[Working demo]

var el = $("#sticky"); 
var win = $(window); 
var width = el.width(); 
var height = el.height(); 
var win_height = $(window).height(); 

window.onscroll = function() { 
    var offset = el.offset().top + height - win_height; 
    if (win.scrollTop() > offset) { 
    window.onscroll = function() { 
     el.css({ 
     width: width, 
     position: "absolute", 
     top: win.scrollTop() + win_height - height 
     }); 
    }; 
    } 
}; 

Si vous n'avez pas besoin de soutenir les navigateurs basés sur IE, vous pouvez utiliser:

position: "fixed" 
bottom: 0 
+0

hmm, cette réponse ne fait pas "Je veux un div qui est au milieu de l'écran, quand je défile vers le bas avant que le div est caché, je veux qu'il reste en haut de la fenêtre et reste là. retour vers le haut, je veux qu'il colle à sa place d'origine. " pour moi. J'aimerais savoir comment obtenir quelque chose comme l'effet de blog de mashable (voir http://mashable.com/2011/10/25/windows-xp-it-will-not-die/ les boutons de partage sur la gauche) – butterywombat

+0

Recherchez-le, et si vous ne le faites pas sur SO postez une question et je (ou d'autres) répondra. – galambalazs

Questions connexes