0

I have a sidebar that allows me to snap to content on the main part of the page. The sidebar sticks to the page as the user scrolls down

<div class="sidebar" style="width: 16%;float: left;position: absolute;margin-top:15px;">
    <div class="jump_stage" onclick="window.location.href='#div1'">div1</div>
    <div class="jump_stage" onclick="window.location.href='#div2'">div2</div>
    <div class="jump_stage" onclick="window.location.href='#div3'">div3</div>
    <div class="jump_stage" onclick="window.location.href='#div4'">div4</div>
    <div class="jump_stage" onclick="window.location.href='#div5'">div5</div>
</div>

<div class="main_body">
    <div id="div1" class="content">Div 1 content</div>
    <div id="div2" class="content">Div 2 content</div>
    <div id="div3" class="content">Div 3 content</div>
    <div id="div4" class="content">Div 4 content</div>
    <div id="div5" class="content">Div 5 content</div>
</div>

I want to add an active class (or something similar) to the sidebar when the page reaches the div. I have no idea where to start, and searching for it has brought me no luck so far.

Would I have to work out the height of the page and each element and add the class when the scroll reaches a specific number? Any help would be greatly appreciated!

Pooshonk
  • 1,284
  • 2
  • 22
  • 49
  • Seems simple enough. Check out this question: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling All you'd need to do is add something like `$(this).addClass("nameOfClassHere");` when the browser checks if the div is in view. There's also a ton of simple jQuery plugins that check if items are in view that you can use. – Alexander Lozada Feb 21 '14 at 15:43
  • Appended: Nice jsFiddle with example: http://jsfiddle.net/moagrius/wN7ah/ – Alexander Lozada Feb 21 '14 at 15:52

1 Answers1

0

I modified this jsfiddle to accomplish what you are trying to achieve, which you can view here.

All I did was modify what to do when scrolled.

$( window ).scroll(function(){
    $('.box').each(function(){
        if ($(this).isOnScreen()){
            $(this).addClass('orange');
        }
    });
});

This will text, when the window is scrolled, whether each individual box on the screen is in fact in the viewport, determined by the function I used from the original jsfiddle, shown below.

$.fn.isOnScreen = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right ||     viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

If this code returns true, the item is in viewport, and it will add the class 'orange'.

It's difficult to see that this actually works, so if you want, you can try modifying the 3rd line to if ($(this).isOnScreen() === false){ Then you can see that only the items off the screen will be orange when you scroll down.

Alexander Lozada
  • 4,019
  • 3
  • 19
  • 41
  • This doesn't work how i expect it to. There are no classes being added/removed when I scroll past any element. – Pooshonk Feb 21 '14 at 16:03
  • Aren't there? Perhaps I misread your question. This jsfiddle adds the class ".orange" to all the named divs in the viewport when the area is scrolled. Is that not what you are going for? – Alexander Lozada Feb 21 '14 at 16:05
  • No, I want a side menu to add an 'active' class when the user scrolls past the main element in the body. The side menu is fixed and clicking on it snaps the user to the div. So when the user reaches the div, the corresponding sidebar link should be active. – Pooshonk Feb 21 '14 at 16:07
  • hmm, so you mean when a certain div is in view, your sidebar will add a class to the corresponding div name to show it is in view? – Alexander Lozada Feb 21 '14 at 16:23