Controlling Scroll View header behavior from js

[EdinB]

Hi all,

I'm developing an app where I would like to have a header that slides down when user moves to the second scroll view item and hides when the first item is fully displayed, something similar to the effect in Fitbit weather app. Do you have any tips how to detect that first scrollview item is fully displayed?

[JonFitbit]

It sounds like you're describing the section header, but you don't need to control it via JS, it just does it.

https://dev.fitbit.com/build/guides/user-interface/components/views/#section-headers

[EdinB]

Hi Jon. Thank you for your reply. Well yes and no. The section header is a "sticky" header. It sticks to the top of the screen. What I had in mind is something like this:

index.gui:

    <symbol id="header">
      <g transform="translate(0,-40)">
        <rect width="100%" height="40" fill="fb-black"/>
        <animateTransform attributeType="translate"
                          from="0,-40" 
                          to="0,0" 
                          begin="enable" 
                          dur="0.3"
                          final="keep"
                          easing="ease-in"/>
        <animateTransform attributeType="translate"
                          from="0,0" 
                          to="0,-40" 
                          begin="disable" 
                          dur="0.3"
                          final="keep"
                          easing="ease-out"/>
      </g>
    </symbol>
    
    <use href="#scrollview">
      <use id="main-header" href="#header" layer="1"/>
      <use id="first-scrollview-item" href="#scrollview-item">
      ....
      </use>
      <use href="#scrollview-item">
      .....
      </use>
    </use>	

index.js:
    ....
	let handler = new TouchHandler(document.getElementById("first-scrollview-item"));
    touchArea.onmousedown = (evt) => handler.init(evt);
    touchArea.onmousemove = (evt) => handler.track(evt, (event) => headerEl.animate(event));
	
touch.js

export class TouchHandler {
  constructor(element) {
    this.element = element;
    this.startY = 0;
    this.isDown = false;
  }
  
  init(evt) {
    this.startY = evt.screenY;
  }

  track(evt, animate) {
    let delta = evt.screenY - this.startY;

    if (!this.isDown && delta < 0) {
      animate("enable");
      this.isDown = true;
    }
	
	//not working
	if (this.isDown && Math.floor(delta) + this.element.y > 0) {
      animate("disable");
      this.isDown = false;
    }
  }
}

I am new to JS and I believe I choose completely wrong way to do it. 🙂

I tried to attach event listener for pagescroll but without success.

[clockwork_robot]

Try tagging things you want touch events for with:

pointer-events="visible"

Then add

element.onclick(evt) {...}

in your Javascript code to handle when it gets clicked.  That worked for me.