Question

当使用jQuery和CSS的组合来触发我的导航栏在滚动时缩小时，当您滚动回到某个位置时会出现越野车的问题，我以视频为例。

我尝试了两种不同的方法。第一种是将$（window）.scrollTop）与if语句以及一系列.addClass和.removeClass一起使用。我尝试的第二件事是将$（window）.scrollTop）与一系列.css动态样式修改一起使用。这两种尝试都呈现与该视频https://youtu.be/YXKsrL1cghs中相同的最终结果。

我第一次尝试jQuery：

$(document).ready(function () {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() >= 40) {
            $(".navbar").removeClass("py-5");
            $(".navbar").addClass("compressed");
        } else {
            $(".navbar").addClass("py-5");
            $(".navbar").removeClass("compressed");
        }
    });
});

我第二次尝试jQuery：

$(document).ready(function () {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() >= 40) {
            $(".navbar").css({ "padding-top": "10px" });
            $(".navbar").css({ "padding-bottom": "10px" });
        } else {
            $(".navbar").css({ "padding-top": "3rem" });
            $(".navbar").css({ "padding-bottom": "3rem" });
        }
    });
});

我的CSS：

.navbar.compressed {
    padding-top: 10px;
    padding-bottom: 10px;
}

我的预期结果将是平滑滚动的固定导航栏，该导航栏滚动到特定点后会缩小为较小的大小。

实际上发生的是，当您向下滚动超过某个点时，对于20px的高度，它会变成超级越野车并开始上下反弹。一旦清除了20像素左右的像素，就可以了，但是当您向上滚动时，在20像素像素的像素内也一样。

Answer 1

观看视频时，我注意到您的Collections.sort(records, new Comparator<Record>() { @Override public int compare(Record record1, Record record2) { return (int) (record2.getCreatedAt() - record1.getCreatedAt()); } });有.navbar。这可能是当您删除类transition: all .3s并添加类py-5时触发两次转换的原因。

如果您还可以提供HTML标记和CSS，将会很有帮助。

Answer 2

该脚本对DOM的操作很多。我不确定这是否可以解决您的问题，但是如果尚未应用，请仅更改类可能是个好主意。

$(document).ready(function() {
  $(window).on("scroll", function() {
    let navbar = $(".navbar");
    if ($(window).scrollTop() >= 40) {
      if (navbar.hasClass("py-5")) {
        navbar.removeClass("py-5");
        navbar.addClass("compressed");
      }
    } else {
      if (navbar.hasClass("compressed")) {
        navbar.addClass("py-5");
        navbar.removeClass("compressed");
      }
    }
  });
});

body {
  height: 10000px;
  position: relative;
}

.navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  top: 0;
  transition: all .3s
}

.py-5 {
  background-color: blue;
  padding-top: 10px;
  padding-bottom: 10px;
}

.compressed {
  background-color: red;
  padding-top: 0px;
  padding-bottom: 0px;
}

<html>

<head></head>

<body>
  <nav class="navbar py-5">Navigation</nav>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

jQuery固定的导航栏在滚动时缩小到较小的大小，这是超级越野车

2 个答案: