jquery - 修复了滚动条上的 div...需要将主体向下推以补偿 div 高度吗？

Question

我可以将导航 div 设置为在滚动经过它时固定，但是我需要扩展 jQuery 代码以将 CSS 元素添加到正文以将其向下推 div 的高度以补偿固定 div 时发生的跳转。

我使用的 jQuery 代码是

var $window = $(window),
   $stickyEl = $('nav#main'),
   elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});

当应用 .sticky 类时，我需要向 body 标签添加一个 40px 的 margin-top。

是否有我可以制定的 CSS 规则将 margin-top:40px 设置为 body，但是当显示 .sticky 时？类似于子 css 元素 (>) 的对立面？

Answer 1

只需将你的粘性类添加到你的 body 中，而不是简单地使用

body.sticky {margin-top: 40px;}
body.sticky nav#main {poistion: fixed;}

当您删除粘性类时，两者都会重置为正常。