Div top when scroll up and bottom when scroll down

Hello,
I want an ads div appears at the top when you scroll up the page and at the bottom when you scroll down. Can anyone suggest me how to do it?
Thanks all!

1 Like
let startPosition = 0;
let direction;
window.addEventListener("scroll", () => {
  let endPosition = document.body.getBoundingClientRect()).top;
  direction = endPosition > startPosition ? "DOWN" : "UP";
  startPosition = endPosition;
});

(Note, not tested, may be slight changes needed to be fully functional)

@DanCouper , thanks for your response. I’m trying but not success until now.
see it my div (the red one).

Screenshot doesn’t show anything I’m afraid. You need to post code, the picture is just some text with a red block above it.

The code I posted just demonstrates how you tell which direction a user is scrolling – I can’t tell what you’ve tried without you posting some code & where you’re stuck

See it here:
https://codepen.io/fdfd/pen/gOpNbPM

You didn’t do anything with the code?

  1. There is an extra parenthesis before the top property in the original code.

  2. You may have to use position fixed instead of sticky.

Quick example. Just to keep the original code as is, and make it obvious what is going on, the code is a bit verbose.
https://jsfiddle.net/q3ojnhyt/

1 Like

You need to use JavaScript for this, that’s what I posted. Have you tried anything?

1 Like

@lasjorg Thanks for your help

Thanks for your help, i used @lasjorg solution. See it above