Javascript 不要调整粘性div的宽度

我有一个粘滞的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
    });
}

});

---

我还创建了一个提琴：

您可以使用

继承

：

.sticky {
    width: inherit;
    ...
}

对于小屏幕问题，添加以下内容：

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

如果屏幕大小小于768px，这将覆盖宽度：继承

---

演示。

您可以使用

inherit

：

.sticky {
    width: inherit;
    ...
}

对于小屏幕问题，添加以下内容：

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

如果屏幕大小小于768px，这将覆盖宽度：继承

---

---

演示。

通过将位置设置为“固定”，将其从页面流中删除，容器中的100%与页面的100%不同。所以如果你想让它保持不变的大小，你需要给它一个固定的宽度（px），你可以用CSS或者JS来实现。但是我有一个反应灵敏的设计，所以我必须使用断点？如果你认为responsive@Felix我会避免在较小的显示器上修复任何东西，因为它不可靠，并且可能会导致移动设备上的缩放问题。但是我需要修复它，它是一种游戏宽度，在顶部是一个固定元素通过将位置设置为固定，您正在从页面流中删除它，容器中的100%与页面的100%不同。所以如果你想让它保持不变的大小，你需要给它一个固定的宽度（px），你可以用CSS或者JS来实现。但是我有一个反应灵敏的设计，所以我必须使用断点？如果你认为responsive@Felix，我会避免在较小的显示器上修复任何东西，因为它不可靠，可能会导致移动设备上的缩放问题。但我需要修复它，它是某种游戏宽度，topGenius上的一个固定元素！我认为这行不通。你知道这是否适用于所有相关浏览器吗？我刚刚测试过这是IE、Chrome、FF、Safari和Opera的最新版本。所有工作如预期：-）我认为IE6和IE7不支持它。它在现代浏览器中应该可以工作。它可以工作，但我在右边有一个奇怪的偏移，你可以在这里看到：这将是一个填充/边距问题尝试添加此

框大小：边框框
Genius！我认为这行不通。你知道这是否适用于所有相关浏览器吗？我刚刚测试过这是IE、Chrome、FF、Safari和Opera的最新版本。所有工作如预期：-）我认为IE6和IE7不支持它。它在现代浏览器中应该可以工作。它可以工作，但我在右侧有一个奇怪的偏移，您可以在这里看到：这将是一个填充/边距问题尝试添加此
框大小：边框框