Как добавить условный оператор If-Else к элементу со слушателем событий? - PullRequest
Новая
       0

Как добавить условный оператор If-Else к элементу со слушателем событий?

0 голосов
/ 19 июня 2020

Поскольку я использую плагин Smooth-Scrollbar от idiotWu . Что касается установки скрипта, нам нужно пометить весь контент под тегом <main> сразу после тега <body>, чтобы вся страница могла прокручиваться, поэтому мы не можем определить положение прокрутки с помощью стандартной функции .

Я хочу установить условие, используя инструкции If и Else, заявив, что If <main class="wrapper"> или его дочерний элемент <div class="scroll-content">, имеет transform: translate3d(0px, -400px, 0px), добавить фиксированный идентификатор в заголовок, иначе удалить фиксированный идентификатор из заголовок, все это с использованием прослушивателя событий. Это заставит заголовок отображаться вверху как фиксированный только при прокрутке, когда он достигнет left: 0px; top: -400px;.

Ниже находится DOM и сценарий, который прослушивает offset.x и offset.y of <main class="wrapper"> и устанавливает такое же значение offset.x и offset.y равным <header id="fixed">, что позволяет всегда держать заголовок наверху.

Вот DOM 

<body>
  <main class="wrapper">
    <div class="root-content">
      <header id="fixed">
        <h2>My Header</h2>
      </header>
      <section>
      </section>
    </div>
  </main>
</body>

Вот сценарий 

// -- Plugin Initialization -- //
Scrollbar.use(OverscrollPlugin);
Scrollbar.init(document.querySelector('.wrapper'));

// -- Fixed Header -- //
var main_scrollbar = Scrollbar.init(document.querySelector('.wrapper'));
 main_scrollbar.addListener(function(status) {
   var offset = status.offset;

   fixed.style.left = offset.x + 'px';
   fixed.style.top = offset.y + 'px';
});


Вот как работает приведенный выше сценарий. Он выбирает значения преобразования из <div class="scroll-content"> и применяет значение, например style="left: 0px; top: 400px;" к <header id="fixed">, поэтому оно остается наверху.

enter image description here


Я хочу, чтобы заголовок появлялся вверху или фиксировал его только тогда, когда <div class="scroll-content"> имеет transform: translate3d(0px, -400px, 0px). Но при использовании сценария выше заголовок всегда фиксирован или закреплен, поэтому в этом случае требуется условный оператор if else для изменения указанного выше сценария, поэтому заголовок добавляется с id="fixed" только тогда, когда <div class="scroll-content"> имеет transform: translate3d(0px, -400px, 0px).

CodePen: https://codepen.io/ToxifiedM/pen/WNrozbr

1 Ответ

1 голос
/ 19 июня 2020

Сначала найдите свойство transform в атрибуте style в вашем элементе 

element.style.transform

Затем используйте регулярное выражение, чтобы найти совпадение 

/translate3d\(0px\, -400px\, 0px\)/.test(element.style.transform)

Это даст true или false, чтобы вы могли использовать его в любом операторе if.

Изменить: возможно, это может быть то, что вы ищете 

var sc = document.querySelector(".scroll-content");
//select the scroll-content element
let translateString = sc.style.transform.split(", ")[1].replace("px","");
//split and replace the transform string to keep only Y axis value
let translateNum = parseInt(translateString);
//Parse the string to int number
if(translateNum <= -400) return false;
//compare and return if condition does not match

Итак, ваша функция статуса закончится следующим образом: 

function(status) {

  let sc = document.querySelector(".scroll-content");
  let translateString = sc.style.transform.split(", ")[1].replace("px","");
  let translateNum = parseInt(translateString);
  if(translateNum <= -400) return false;

  var offset = status.offset;
  fixed.style.left = offset.x + 'px';
  fixed.style.top = offset.y + 'px';
}

Редактировать 2: Вы просите установить атрибут по условию. Вы можете применить это (следуя предыдущей функции) 

let header = document.querySelector(".root-content > header");
if (translateNum <= -400){ 
  header.setAttribute("id", "fixed");
}
else{
  header.removeAttribute("id");
}

Надеюсь, это вам поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...