JQuery удалить фиксированный класс при прокрутке назад - PullRequest
Новая
       21

JQuery удалить фиксированный класс при прокрутке назад

0 голосов
/ 19 марта 2019

У меня возникли некоторые проблемы с removeClass () в jquery.Я прочитал много сообщений об этом и до сих пор не могу найти свою ошибку.Любые указатели от сообщества приветствуются!

При прокрутке этого фрагмента фиксированный класс будет добавлен к синей полосе.При прокрутке назад вверх она не удаляется.Я не понимаю этоКто-нибудь может сказать мне, что я делаю не так? 

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

Ответы [ 3 ]

1 голос
/ 19 марта 2019

Поместите вашу переменную 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>

Жаль, что я не помог вам

0 голосов
/ 19 марта 2019
Проблема

в том, что distancetotop не удаляется до тех пор, пока не достигнет 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>
0 голосов
/ 19 марта 2019

Проблема заключается в том, что после добавления фиксированного класса в заголовок таблицы его 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();
});
...