时间戳

首页 > 解决方案 > 滚动备份时jQuery删除固定类

jquery - 滚动备份时jQuery删除固定类

问题描述

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

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

$(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>

标签： jqueryfixed-header-tables

解决方案

将您的变量放在滚动功能之外，当您向下滚动时distanceToTop，它总是等于您的变量。y

您只需将表格标题的偏移顶部实例化一次，当您向下滚动时，表格的偏移顶部等于您的窗口滚动顶部。

$(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>

希望我确实帮助了你

推荐阅读