Фиксированное положение, связанное с родительским контейнером

Question

Я использую очень простой код, чтобы сделать липкий элемент в прокрутке.

Я хочу сделать .top липкий, который обернут внутри .wrap. Когда я прокручиваю вниз, я хочу установить положение .top, связанное с оберткой (так, чтобы оно начиналось слева: 0, связанное с .wrap, не связанное с телом. Я хочу сохранить его внутри только .wrap . Как я могу сделать это Благодаря

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 Эмо: http://jsfiddle.net/63cFy/

Answer 1

Попробуйте следующий CSS:

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

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

---

PS: Как @jsmorph упоминалась вы можете также добавить top: 0 сделать элемент look better по прокрутке.

Answer 2

Как это

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; 
}