2

I have this scrollable text where the user is able to scroll so that my name is shown. I want to stop the text from being scrolled any further when the element reaches the middle of the user's screen. Is there any way to do that? Attached below is a snippet of the code.

        let text = document.getElementById('text');
        var textRect = text.getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        var w = window.innerWidth;
        const scaler = 1/25
        window.addEventListener('scroll', function(){
            let value = window.scrollY;

            if (value < w/2.65) /*when text is right of center*/{
                text.style.marginRight = value * 3*scaler+ 'vw';
            }


        })

I have made many futile attempts at solving this issue but all have gone in vain. Thank you to anyone that helps me solve this issue.

I have tried using innerwidth to compare my value to the width of the screen and used document.body.getBoundingClientRect() but none of those have worked either

Rush Shaw
  • 21
  • 1
  • 1
    Have you thought about using `position: sticky`? You would pair it with something like `top: 50vh`. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position#try_it) (check the interactive example to see how it works). – FiddlingAway Jan 29 '23 at 13:50
  • When i add sticky to my code it seems to be messing up the other elements such as the images and such. This is what I'm doing, https://rush-shaw.github.io/ when I try to scroll down my name should slide in from the right and then stop in the middle, but instead it keeps on going. I am still new to html and css so I'm just trying to learn this concept. – Rush Shaw Jan 29 '23 at 17:11
  • I've also tried this: if ($('#text').css('text-align') != 'center'){ text.style.marginRight = value * 3*scaler+ 'vw'; } I thought that my text would stop scrolling when it reaches the centre but it just doesn't budge at all now. – Rush Shaw Jan 29 '23 at 17:47

0 Answers0