Можно ли реализовать стрелку, наводящуюся на элемент?

Question

[mirti de vednis]

Суть такова:

На странице есть блок с картинкой-стрелочкой, которая должна отслеживать fixed элемент. Стрелка имеет два состояния:
- До того момента, пока этот элемент не окажется на уровне стрелки и ниже, стрелку можно скрыть.
- После этого момента стрелка должна отслеживать положение элемента.

В идеале должно работать и при прокрутке страницы снизу вверх, до того момента, пока элемент не окажется выше стрелки на странице. Это в целом сложно реализовать или задача тривиальная?

Код на jsfiddle

Answer 1

[RAX7]

Comments

[mirti de vednis]

Все работает. Только надо условие поменять вот так:

if (fixedRect.y > arrowRect.y) {
  	arrowEl.classList.remove('hidden');
  }
  else {
    arrowEl.classList.add('hidden');
    return;
  }

[RAX7]

mirti1,

- До того момента, пока этот элемент не окажется на уровне стрелки и ниже, стрелку можно скрыть.

То-то я смотрю какое-то условие странное, должно же быть наоборот)

[mirti de vednis]

RAX7, хмм, перечитал, вроде формулировка правильная :)

Означает, что стрелка скрывается, пока fixed элемент выше на странице, чем стрелка.

upd: понял, смутило "не окажется". Но тут все верно. Чтобы без "не": "До того момента, когда этот элемент окажется на уровне стрелки и ниже, стрелку можно скрыть".

[RAX7]

mirti1, да видимо я туплю, убедил, ты прав=)