Не изменяйте размер липкой div

Question

У меня есть липкий div, который остается сверху, если я прокручу его. Но он изменяет размер до полного размера экрана, и я хочу, чтобы он сохранял тот же размер.

Вот CSS-код для обертки и липкий класс:

.wrapper{ 
margin: 0 auto; 
width: 100%; 
height: 180px; 
background-color:#fff; 
border-top: 0; 
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8; 
-moz-box-shadow: 0 8px 6px -6px #B8B8B8; 
box-shadow: 0 8px 6px -6px #B8B8B8; 
} 

.sticky { 
width: 100%; 
position: fixed; 
left: 0; 
top: 0; 
z-index: 100; 
border-top: 0; 
padding-left: 15px; 
padding-right: 15px; 
-webkit-box-shadow: 0 8px 6px -6px #B8B8B8; 
-moz-box-shadow: 0 8px 6px -6px #B8B8B8; 
box-shadow: 0 8px 6px -6px #B8B8B8; 
} 

А вот код JS:

var global = {}; 

$(document).ready(function(){ 

var element = $(".wrapper"); 
    offset = element.offset(); 

global.top = offset.top; 
global.height = element.outerHeight(); 

}); 

$(window).scroll(function() { 

var scroll_top = $(document).scrollTop(); 

if (scroll_top > global.top) { 
    $('.wrapper').addClass('sticky'); 
    $("body").css({ 
     "padding-top": global.height 
    }); 

} else { 

    $('.wrapper').removeClass('sticky'); 
    $("body").css({ 
     "padding-top": 0 
    }); 
} 

}); 

Я создал также скрипку: http://jsfiddle.net/44ep8dz4/1/

Answer 1

You мог бы использовать inherit:

.sticky { 
    width: inherit; 
    ... 
} 

Для маленькой проблемы экрана, добавьте это:

@media(max-width: 768px) { 
    .sticky { 
     width: 100%; 
    } 
} 

Это отменяет width: inherit, если размер экрана меньше, чем 768px.

Демонстрация jsfiddle.