Py学习  »  Jquery

向上滚动时jQuery删除固定类

TVBZ • 4 年前 • 316 次点击  

我对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>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/54823
 
316 次点击  
文章 [ 3 ]  |  最新文章 4 年前
jasinth premkumar
Reply   •   1 楼
jasinth premkumar    5 年前

问题是,distancetoop在到达nav pos(当它到达值时)之后才被标记为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>
Fenistil
Reply   •   2 楼
Fenistil    5 年前

问题是,将固定类添加到表标题后,它的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();
});
Bambou
Reply   •   3 楼
Bambou    5 年前

把你的 distanceToTop 在scroll函数之外的变量,它总是等于 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>

真希望我帮了你