Question

我在jquery中的removeClass（）有问题。我已经阅读了很多关于此的文章，但仍然找不到我的错误。来自社区的任何指示都将受到欢迎！

在此代码段中向下滚动时，固定类别将添加到蓝色栏中。向上滚动时，不会将其删除。我不明白有人可以告诉我我在做什么错吗？

/**
 * Returns explicit serial version UID value declared by given class, or
 * null if none.
 */
private static Long getDeclaredSUID(Class<?> cl) {
    try {
        Field f = cl.getDeclaredField("serialVersionUID");
        int mask = Modifier.STATIC | Modifier.FINAL;
        if ((f.getModifiers() & mask) == mask) {
            f.setAccessible(true);
            return Long.valueOf(f.getLong(null));
        }
    } catch (Exception ex) {
    }
    return null;
}

$(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);
}

Answer 1

将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>

希望我能帮到你

Answer 2

问题在于，将固定的类添加到表头后，其offset（）。top始终等于window.scrollTop（），因为它固定在视口的顶部。第一次添加类时，尝试将原始偏移量保存到全局变量中，然后仅从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

问题是，直到if从未失败，否则部分将永远不会执行，直到将其到达的值更改为0为止，它才会让distancetotop失效。

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

$(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在向上滚动时删除固定的类

3 个答案: