How to create a scroll event for specific positions

Question

I currently have a scroll event which changes the background when scrolled downwards. However, I'd like the background to revert to its original color once the page is scrolled or positioned to the top. How do I do this? Here is some of my code:

class Nav extends Component {
    state = {
        background: "skyblue",
        navSize: "130px",
        activeItem: '',
        options : [
            {key: 'logout', text: 'logout'}
        ]
    }
    handleItemClick = (e) => this.setState({activeItem: e})
    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    } 
    componentWillUnmount() {
         window.removeEventListener('scroll', this.handleScroll);
    }

score 0 · Answer 1 · answered Oct 31 '18 at 18:53

0

Detecting scroll position

var currentPosition = 0;
var originalColor = ''; // original color before scroll down
window.addEventListener('scroll', function(){
  currentPosition = (document.body.getBoundingClientRect()).top;
  if ((document.body.getBoundingClientRect()).top > currentPosition ){
        // user scroll to up direction
   }
    else{
         // user scroll to down direction
     }
});

Now you can implement your custom logic based on scroll postion up or down.

answered Oct 31 '18 at 18:53

front_end_dev

1,998
1
9
14

How do I get the logic for the specific position when the scrollbar is all the way at the top of the page? – guest229192 Oct 31 '18 at 19:09
@guest229192 If this value `(document.body.getBoundingClientRect()).top` comes out to be less then 50. consider this as a top position and handle this accordingly in the `scroll` event listener. – front_end_dev Oct 31 '18 at 19:18

ardev · Answer 2 · 2018-10-31T19:58:26.463

0

could get the scroll top and based on the value, update a state. Then based on the state, change the background-color. Heres some psuedo code to illustrate:

handleScroll = (target) => {
    var a = element.scrollTop;

 //separate this into a different async function/promise and call here
 //consider using Refs instead of DOM method: 
// https://reactjs.org/docs/refs-and-the-dom.html

const elRef = document.getElementById(target);
    window.scrollTo({
        left: 0, 
        top: elRef.offsetTop -80,
        behavior: "smooth"
    })
  }

    if(a <= 200){
        this.setState({ posForBG: top })
    } else {
        this.setState({ posForBG: middle })
    }
}

then in body set the class based on the state

<body class={this.state.posForBG}>
    ...

Finally just set background color in you css, like:

body{
    transition: background-color .5s ease-in-out;
    .top{
        background-color: blue
    }
    .middle{
        background-color: green;
    }
}

Could use react-fns as well if thats easier. Alot of what you want to do is solved already here: https://github.com/jaredpalmer/react-fns

edited Oct 31 '18 at 19:58

answered Oct 31 '18 at 18:57

ardev

653
2
6
19

This looks nice if only i could figure out how to do the "element.scrollTop" part – guest229192 Oct 31 '18 at 19:04
https://stackoverflow.com/questions/2481350/how-to-get-scrollbar-position-with-javascript – ardev Oct 31 '18 at 19:21
or because its on the body tag? Just set the `div.app` to be full width/height and do
using a string literal for the class, with backticks
– ardev Oct 31 '18 at 19:22
set `state.posForBG` on ` and use the state to handle both the App Class and the scroll-to for the specific element – ardev Oct 31 '18 at 19:27

How to create a scroll event for specific positions

2 Answers2