Question

我正在尝试在div的粘性部分实现一些动画，但我不想隐藏里面的所有子div。我发布了一个JSFiddle来举例说明问题（编辑）：https://jsfiddle.net/vgeq7xx4/8/

内容上方的三个div（textFeed）应始终可见。 jQuery代码段应该隐藏一些（在我们的例子中是三个）但不是在滚动时隐藏粘性内部的所有div。这意味着第二部分的高度随其可见内容而变化，第三部分（标签）在滚动时应在下方调整。

滚动时应该有一种方法可以在中间设置粘性div的动画。我的意思是动态降低其高度应该比通常的默认浏览器速度慢一点。

编辑：我取得了一些进展，并更新了上面的示例。事实证明，用display: none隐藏隐藏的元素是不可能的;在尝试动态设置高度时，我没有成功。相反，我决定通过设置一个在我的最小和最大情况下永远无法达到的更大值来为max-height设置动画。但是，现在的问题是当我向后滚动到初始位置（到顶部）时动画有效，当我向下滚动页面时它不会动画。

$(document).ready(function () {
  var navbar = $(".header").outerHeight();

  $(".contentWrapper").css("margin-top", function() {
    return navbar;
  });

  $(window).scroll(function() {
    if($(window).scrollTop() > 0) {
      if(!$(".contentWrapper").hasClass("scrolled")) {
        $(".contentWrapper").addClass("scrolled");
        $(".about").css("display", "none");
        addSticky();
        calculateHeights();
      }
    }
    else {
      if($(".contentWrapper").hasClass("scrolled")) {
        $(".contentWrapper").removeClass("scrolled");
        $(".about").css("display", "block");
        removeSticky();
        calculateHeights();
      }
    }
  });
});

function calculateHeights() {
  $(".contentWrapper").css("margin-top", Math.max($(".header").outerHeight(), 0 - $(this).scrollTop()));
}

function addSticky() {
  $(".myClass").addClass("sticky");
  $(".tabs").css("position", "fixed");
  $(".myClass").addClass("animateSticky");

  $(".tabs").css("margin-top", $(".myClass").height());
}

function removeSticky() {
  $(".myClass").removeClass("sticky");
  $(".tabs").css("position", "relative");
  $(".myClass").removeClass("animateSticky");

  $(".tabs").css("margin-top", "0");
}

在双向滚动页面时，我想让动画工作的是什么？提前谢谢！

隐藏某些子项时，将父级粘性div设置为某个高度

0 个答案: