Position fixe liée au conteneur parent

Question

J'utilise un code très simple pour faire défiler un élément collant.

Je veux faire .top collant, qui est enveloppé à l'intérieur .wrap. Lorsque je défile vers le bas, je veux définir la position de .top liée à l'enveloppe (de sorte qu'il commence à partir de la gauche: 0 liée à l'enveloppe, pas liée au corps .Je veux le garder dans le .wrap seulement . Comment puis-je faire Merci

jQuery:.

var top = $('.top').offset().top; 
$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 
    if (y >= top){ 
     $('.top').addClass('sticky'); 
    } 
    else{ 
     $('.top').removeClass('sticky'); 
    } 
}); 

CSS:

.wrap{ 
    width: 300px; 
    border: 1px solid green; 
    margin: 0 auto; 
    height: 1000px; 
} 

.top{ 
    background: green; 
    height: 100px; 
} 

.sticky{ 
    position: fixed;  
    top: 0; 
    left: 0; 
    width: 100%; 
} 

D emo: http://jsfiddle.net/63cFy/

Answer 1

Essayez le CSS suivant:

.sticky { 
    position: fixed; 
    width: inherit; 
} 

DEMO:http://jsfiddle.net/63cFy/1/

---

PS: Comme @jsmorph mentionné, vous pouvez également ajouter top: 0 faire l'élément look better sur le défilement.

Answer 2

Vous aimez cette

demo

css

.wrap{ 
    width: 300px; 
    border: 1px solid green; 
    margin: 0 auto; 
    height: 1000px; 
} 

.top{ 
    background: green; 
    height: 100px; 
} 

.sticky{ 
    position: fixed; 
    width: inherit; 
    background-color:red; 
}