Showing messages based on scroll position

Question

I am trying to create a page where there is an avatar in the bottom right hand corner of the screen and when a user scrolls past certain elements on the page, the avatar brings up a popup that gives some brief user feedback based on the point that he is passing.

I have no idea the best way to go about this, I am thinking there will be an ID attached to the scroll point and when that point is scrolled past a tooltip or something will appear for a brief amount of time until the user scrolls past said ID.

Any help would be much appreciated

andergtk · Answer 1 · 2020-02-28T11:14:07.340

It changes the #message's content by scrolling across sections (.section) in the page and identifying which one is visible on viewport. Complete code on the link below:

https://jsfiddle.net/hw475zeL/

Markup:

<div class="container">
  <h1>Custom message on scrolling</h1>
  <div id="section-1" class="section">
    <h2>Section 1</h2>
  </div>
  <div id="section-2" class="section">
    <h2>Section 2</h2>
  </div>
  <div id="section-3" class="section" data-message="Showing section 3">
    <h2>Section 3</h2>
  </div>
  <div id="section-4" class="section" data-message="Showing section 4">
    <h2>Section 4</h2>
  </div>
  <div id="section-5" class="section" data-message="Showing section 5">
    <h2>Section 5</h2>
  </div>
  <div id="section-6" class="section">
    <h2>Section 6</h2>
  </div>
</div>
<div id="message" style="visibility: hidden; opacity: 0;">Teste</div>

JavaScript:

var sections = document.querySelectorAll('.section');
var message = document.querySelector('#message');

document.onscroll = function(event) {
  for (var section of sections) {
    if (elementInViewport(section) && section.hasAttribute('data-message')) {
      message.innerText = section.getAttribute('data-message');
      message.style.visibility = 'visible';
      message.style.opacity = 1;
      break;
    }

    message.style.visibility = 'hidden';
    message.style.opacity = 0;
  }
}

And the elementInViewport() function from this answer:

https://stackoverflow.com/a/125106/5862990

This is kind of what I was thinking.. except I wanted the box to pop up instead of having something always visible. If there a way of having it .show or .hide using the above function? — Chris Ware, Feb 27 '20 at 13:06
I've updated the link to jsfiddle to contemple your necessity, I hope it helps you :) — andergtk, Feb 27 '20 at 13:17
@ChrisWare it's better to set as an accepted answer if that's the one meeting your expectations...That would give him some grateful score and this is how we know that's solved :) — Bilel, Feb 27 '20 at 20:30

score 0 · Answer 2 · answered Feb 27 '20 at 12:01

0

If you set every element as a row and then use

<div class="row" onmouseover="avatarscript">
<div class="row" onmouseover="avatarscript2">

in avatarscripts use jquery or javascript to change to the appropriate avatar-text.

answered Feb 27 '20 at 12:01

Gustav

29
3

Nice idea but unfortunately it doesn't work on scrolling... mouse should be initially on the first raw here to work :) – Bilel Feb 27 '20 at 20:33

score 0 · Answer 3 · answered Feb 27 '20 at 12:02

you can use scroll event listner.

// what should we do when scrolling occurs
var runOnScroll =  function(evt) {
  // not the most exciting thing, but a thing nonetheless
  console.log(evt.target);
};


// and then make each element do something on scroll
elements.forEach(function(element) {
  window.addEventListener("scroll", runOnScroll, {passive: true});
});

Showing messages based on scroll position

3 Answers3