Div top when scroll up and bottom when scroll down

1

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
2 
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)

3

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

image
image1779×856 580 KB

4

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

5

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

6

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
7

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

1 Like
8

@lasjorg Thanks for your help

9

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