Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Sam Bell
Sam Bell
4,410 Points
Posted by Sam Bell
Sam Bell
4,410 Points

Show and hide an element when you scroll over a particular element in the viewport.

Hello

I am creating a website that has dates listed. Some dates have events which will pop up when you scroll over that particular date but will hide again once you have scrolled off the date.

I have this javascript in place but its adding/removing the classes at the wrong positions (too early) I have also included a snippet of my HTML too.

Can somebody tell me what I am doing wrong please?

var allEvents = document.querySelectorAll('.event'); window.addEventListener('scroll', function(){

for(i = 0; i < allEvents.length; i++){

    var eventEl = allEvents[i];
    var eventPos = eventEl.getBoundingClientRect().top;

    var scrolledDistance = window.pageYOffset + 150;

    if (scrolledDistance >= eventPos){

        allEvents[i].classList.add('active');

    } else {
        allEvents[i].classList.remove('active');
    }
}

});

<ul>

                    <li class="event">

                        <h3>TUESDAY 01</h3>

                        <div class="eventDetail">
                            <h4>New Years Day</h4>

                        </div>

                    </li>
                    <li><h3>WEDNESDAY 02</h3></li>
                    <li><h3>THURSDAY 03</h3> </li>
                    <li><h3>FRIDAY 04</h3></li>
                    <li><h3>SATURDAY 05</h3></li>
                    <li><h3>SUNDAY 06</h3></li>
                    <li><h3>MONDAY 07</h3></li>
                    <li><h3>TUESDAY 08</h3></li>
                    <li><h3>WEDNESDAY 09</h3></li>
                    <li><h3>THURSDAY 10</h3></li>
                    <li><h3>FRIDAY 11</h3></li>
                    <li><h3>SATURDAY 12</h3></li>

</ul>

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 Points

Would you mind working in codepen? I got one started: https://codepen.io/brendan-w/pen/bzMxRw

I'm not sure what you mean exactly. When the element comes into view it changes style, when it scrolls into the centre of the page?

Sam Bell
Sam Bell
4,410 Points
Sam Bell
Sam Bell
4,410 Points

There is a black line, like an indicator that will scroll over the date. The event isnt supposed to show until that line is directly sitting on the date.

Sam Bell
Sam Bell
4,410 Points
Sam Bell
Sam Bell
4,410 Points

Yup, so there is a black line indicator that is set to fixed and when the line scrolls over the date, the event will show and once you scroll off that date the event this hide again.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 Points

I think this is outside of my expertise. But what you're looking for seems to be similar to the parallax effect. There are some plugins and tutorials out there that you may be able to adapt.