Header Changes on Scroll

Ask the community
,
1

Hey Folks,

Is there anyway to make a header (which is transparent) turn in to colour when scrolling?

2

I don’t know exactly but you can check scroll x and y using code below so that might work in you run it and checks x and y and then modify opacity or color.

import wixWindow from 'wix-window';

// ...

wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
    let windowHeight = windowSizeInfo.window.height;      // 565
    let windowWidth = windowSizeInfo.window.width;        // 1269
    let documentHeight = windowSizeInfo.document.height;  // 780
    let documentWidth = windowSizeInfo.document.width;    // 1269
    let scrollX = windowSizeInfo.scroll.x;                // 0
    let scrollY = windowSizeInfo.scroll.y;                // 120
  } );