fadeOut при событии прокрутки с использованием элемента sticky-top - PullRequest
Новая
       51

fadeOut при событии прокрутки с использованием элемента sticky-top

0 голосов
/ 31 октября 2018

Я использую bootstrap 4.1.3 / jQuery 3.3.1 с элементом с липким верхом.

  • при прокрутке вниз Я хочу скрыть элемент с наклейкой (div)
  • при прокрутке вверх я хочу показать элемент

Результат, который я имею на данный момент:

  • при прокрутке вниз цикла fadeOut происходит fadeIn
  • когда происходит прокрутка вверх, происходит (это то, что я хочу)

демоверсия прототипа: https://terminaladdict.com/ta_skeleton/
Я только опубликовал соответствующий код здесь.

Полагаю, мне нужно как-то остановить выполнение с помощью функции обратного вызова в fadeOut? (обратите внимание на комментарий в моем коде) 

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').fadeOut(function(){ 
                    // do something here to stop fadeIn;
                });
            } else {
                $('.searchBar').fadeIn();
            }
            lastScrollTop = st;
        });
})
<div class="searchBar container-fluid sticky-top p-3 topbar">
  <div class="container">
    <div class="terminalBG d-flex flex-row rounded border p-2 align-items-center">
      <a class="ta_logo d-flex" href="#" data-toggle="tooltip" title="something">
      text
      </a>
      <input type="text" name="query" id="query" placeholder="Search this website ..." class="form-control d-flex" />
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Изменены переходы CSS: 

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').addClass('fadeOut');
                $('.searchBar').removeClass('fadeIn');
            } else {
                $('.searchBar').addClass('fadeIn');
                $('.searchBar').removeClass('fadeOut');
            }
            lastScrollTop = st;
        });
});

Теперь работает отлично ... не знаете, почему не работают fadeIn и fadeOut?

0 голосов
/ 31 октября 2018

Я думаю, что вы можете получить желаемый результат, попробовав этот метод: https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp Он использует переходы css вместо jquery, что позволяет отменить состояние перехода / анимации, если пользователь выполняет действие oposite. И вместо того, чтобы использовать: document.getElementById ("navbar"). Style.top = "0"; Вы могли бы сделать что-то вроде: document.getElementById ("navbar"). style.opacity = 0;

...