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元素（＆gt;）的相反的东西？

Answer 1

只需将您的粘性类添加到您的身体，而不是仅仅使用

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

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

Answer 2

特异性关系只能以一种方式工作，所以没有选择器来定位元素的父母，虽然有几种方法可以这样做，但我认为它们并不完全适用于你的情况。

我认为你在这里想做的不是使用toggleClass而只是手动进行检查，这样你就可以扩展你的“回调”。

$window.scroll(function() {
  if($window.scrollTop() > elTop) {
    $stickyEl.addClass('sticky');
    $(body).css("marginTop", "40px");
  } else {
    $stickyEl.removeClass('sticky');
  }
});

或者你可以将一个隐藏的div作为spacer，只需使用一个类来显示/隐藏它，然后执行以下操作：

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

你可以尝试做的另一个选择是乱用：before选择器并创建一个div作为间隔符。

固定div滚动...需要将身体向下推以补偿div高度？

2 个答案: