jQuery 向上滚动时删除固定的 class

Question

我在 jquery 中遇到 removeClass() 的一些问题。我已经阅读了很多关于此的帖子，但仍然找不到我的错误。欢迎来自社区的任何指点！

在此代码段中向下滚动时，固定的 class 将添加到蓝色条中。向上滚动时，它不会被删除。我不明白。谁能告诉我我做错了什么？

$(document).ready(function() {
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const distanceToTop = $header.offset().top; // find distance to top
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
  });
});

div.table {
  min-height: 2000px;
  background: #b0b0b0;
}

.table-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="header-container mt-5 mb-2">
    <h1 class="h4">Toggle fixed class</h1>
  </div>
  <div class="table">
    <div class="table-row table-header relative bg-primary text-light mb-1">
      This is the fixed div
    </div>
    <div id="contacts-list" class="">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

Answer 1

将你的 distanceToTop 变量放在滚动函数之外，当你向下滚动时它总是等于你的 y 变量。

您只需实例化 table header 的偏移顶部一次，当您向下滚动时，table 的偏移顶部等于您的 window 滚动到顶部。

$(document).ready(function() {
  const distanceToTop = $('.table-header').offset().top; // find distance to top
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
  });
});

$(document).ready(function() {
  const distanceToTop = $('.table-header').offset().top; // find distance to top
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
    
    console.log(y);
    console.log(distanceToTop);
  });
});

div.table {
  min-height: 2000px;
  background: #b0b0b0;
}

.table-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="header-container mt-5 mb-2">
    <h1 class="h4">Toggle fixed class</h1>
    <div class="relative text-right">
      <input name="search-input" id="search-input" class="" type="search" placeholder="Search a contact ...">
    </div>
  </div>
  <div class="table">
    <div class="table-row table-header relative bg-primary text-light mb-1">
      Fixed div
    </div>
    <div id="contacts-list" class="">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

希望我能帮到你

Answer 2

问题是，在你将固定的class添加到table header之后，它的offset().top将始终等于window.scrollTop( ), 因为它固定在视口的顶部。尝试在第一次添加 class 时将原始偏移量保存到全局变量，然后仅从 window.scrollTop() 和此变量计算距离。

您还可以在滚动功能之外缓存您的选择器：

var original_table_top = -1;
var $header = null;

function OnWindowScroll() {
    //Check if we already have the position
    if (original_table_top == -1) {

        //You have to add the window.scroll pos to it, since what if the page is scrolled when it loaded.
        original_table_top = $header.offset().top + $(window).scrollTop();
    }

    const y = $(window).scrollTop(); // find current scroll position

    if (y >= original_table_top) $header.addClass('fixed');
    else $header.removeClass('fixed');
}

$(document).ready(function() {

    $header = $('.table-header'); //Cache selector

    $(window).scroll(OnWindowScroll);

    //Call the function when the page is loaded
    OnWindowScroll();
});

Answer 3

问题是，distancetotop 在到达导航位置之前不会改变，当它达到值时更改为 0 之后 if 永远不会失败，否则部分将永远不会被执行。

这是我将变量初始化移至顶部的解决方案

$(document).ready(function() {
  const $header = $('.table-header');
  const distanceToTop = $header.offset().top;
  $(window).on("scroll", (event) => {
    
    var y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    if (y < distanceToTop) $header.removeClass('fixed');
    console.log(distanceToTop);
  });
});

div.table {
  min-height: 2000px;
  background: #b0b0b0;
}

.table-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="header-container mt-5 mb-2">
    <h1 class="h4">Toggle fixed class</h1>
  </div>
  <div class="table">
    <div class="table-row table-header relative bg-primary text-light mb-1">
      This is the fixed div
    </div>
    <div id="contacts-list" class="">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

jQuery 向上滚动时删除固定的 class

jQuery remove fixed class when scrolling back up

jquery

fixed-header-tables