如何将粘性肚脐保持在规定的身体宽度内？
如何将粘性肚脐保持在规定的身体宽度内？
提问于 2019-03-07 22:24:04
我的粘性肚脐从身体宽度(最大1450 My )到100%屏幕宽度时滚动。https://biogenity.com/RC19/index.html我使用CSS定义了车身宽度：
body {
max-width: 1450px;
}对于粘性导航条，我目前使用100%的宽度，但它不适用于body的宽度。我不太清楚该用什么代替。
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
}这可以通过.js来解决吗？
$(document).ready(function () {
// Custom function which toggles between sticky class (is-sticky)
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("is-sticky");
}
else {
sticky.removeClass("is-sticky");
stickyWrapper.height('auto');
}
};
// Find all data-toggle="sticky-onscroll" elements
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
sticky.before(stickyWrapper);
sticky.addClass('sticky');
// Scroll & resize events
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
// On page load
stickyToggle(sticky, stickyWrapper, $(window));
});
});提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-07 22:37:51
通过使用position:fixed，您可以从普通文档流中移除元素，因此我不认为body样式适用。
元素将从常规文档流中删除，并且不会为页面布局中的元素创建任何空间。
因此，您应该为其设置最大宽度，并通过将left和right设置为auto使其居中。
.sticky.is-sticky {
position: fixed;
max-width: 1450px;
left: auto;
right: auto;
top: 0;
z-index: 1000;
width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55053771
复制相关文章
相似问题
腾讯云开发者
