[英]Do not resize width of a sticky 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
});
}
});
我还创建了一个小提琴: http : //jsfiddle.net/44ep8dz4/1/
您可以使用inherit
:
.sticky {
width: inherit;
...
}
对于小屏幕问题,添加以下内容:
@media(max-width: 768px) {
.sticky {
width: 100%;
}
}
这将覆盖width: inherit
如果屏幕尺寸小于768px,则width: inherit
。
演示jsfiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.