Блог

Главная - Вопросы по программированию - jQuery удаляет фиксированный класс при прокрутке назад

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

#jquery #fixed-header-tables

#jquery #исправлены таблицы заголовков

Вопрос:

У меня возникла некоторая проблема с 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>

Ответ №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>

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

Комментарии:

1. Хах. Это логично. Теперь я понимаю. Спасибо! 🙂

2. Нет проблем @TVBZ, рад вам помочь, если это действительно ответило вам, поместите этот ответ в качестве решения, пожалуйста 🙂

Ответ №2:

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

Ответ №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>