請勿調整粘性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

您可以使用inherit ：

.sticky {
    width: inherit;
    ...
}

對於小屏幕問題，添加以下內容：

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

這將覆蓋width: inherit如果屏幕尺寸小於768px，則width: inherit 。

演示jsfiddle 。