treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How difficult would it be to make the content scrolling effect in this site?

  • Well, the layout itself is just a bunch of divs stacked together. If you're talking about the side nav/the scrolldown when you click a side nav, it's pretty easy jQuery. You just check the div top position in relation to the window and you can change things from there.
  • Erm, could you please show me an example or anything to get me started?

    I've never, ever used jQuery. I would really love if you could help Chris.

    Couldn't this also be done in CSS3?
  • Check out Waypoints.js, it's really easy to implement.

    http://imakewebthings.com/jquery-waypoints/
  • I don't know enough CSS3 to say, but I feel like you'd have to have some jQuery. @Kralle's example looks pretty promising though, and probably a lot better than I could throw together for you. :P
  • Here's a little JS Fiddle someone posted a while back: http://jsfiddle.net/joshnh/YxRqp/
  • I managed to make something like Odd's jsfiddle.. but I can't seem to figure out how to do the effect where if you scroll up or down, the side menu will change according to what div element you are in..
  • anyone have any suggestions? :P
  • I didn't make the fiddle, and I know very little jQuery so I can't help you, sorry. :-(
  • It's okay, odd. I'm hoping Chris comes back. Haha.
  • Fear not buddy, for I am here. I'll throw something together for you on codepen in a sec.
  • Alright, here's what I came up with. For whatever reason, the waypoint plugin was doing something funky when you scrolled up, so I had to mess with doing a negative index, but now it works well. I tried to make the code pretty simple. Let me know if you have any questions.

    link: http://codepen.io/chrisxclash/pen/21/4
  • Hm, when you scroll up or down the active side bar doesn't update to what section it is in unless you lower the height of the section, which it alright i think.. It works well though, thanks so much Chris.

    Why is there CSS in the HTML section? I'm confused by this.. I don't see any div, class tags or anything.
  • Chris wrote it in HAML. To see the HTML, just click the word HTML in the header of that editor.
  • If you click on the HTML section where it says HAML it, you will see the HTML.

    Edit: Beat me to it.
  • Ah, thanks guys. Still.. I am puzzled how to fix my first question.

    It doesn't scroll correctly unless the window is minimized so it shows half the screen. When it is maximized it will say you are in the section 2 area too early.. the same with all of the other sections.
  • I probably should have switched it to HTML for you, my apologies. The reason it does that is because right now I have the waypoint offset set to 50%. The way the waypoints work is that as soon as the top of the element touches the offset point (in this case, half of the screen) it will trigger that waypoint. If you want to it trigger when the element is more centered, you can try 20% or something else. Just try playing with the section of the jQuery where it says offset: 50% . If you would rather it wait until the waypoint touches the top of the screen, you can take this entire section off:

    ,{
    offset: 50%
    }
  • No use, 205 doesn't work and taking it off makes it worse.

    If you use 20% you cannot even get to the last section.. :(
  • You basically have to add space before or after in order to trigger the waypoints. The top of the box must touch the waypoint offset in order to trigger it. Here's an example using the top of the window to trigger it.

    link: http://codepen.io/chrisxclash/full/21/14
  • My section areas are much smaller than that though ;(

    Also for some reason it won't let me edit the codepen..
  • If your sections are smaller, just play around with the offset until you get it triggering in the area you want. One way to do this is to use this:

    {
    offset: $(window).height()/2 - $('.section').outerHeight()/2;
    }
    This will tell it to make the offset point right where the sections would be centered on the screen.

    Note: In order for it to trigger your last section, you'll need some space under the last box, like a footer or a blank element to push the window down so that they waypoint can be triggered.
  • Hm, where do you put the offset in the javascript?

    I tried putting it in, but it didn't do anything.

    I really appreciate all of the help you have been giving me Chris. It really does help a lot and I greatly appreciate every bit of it.
  • Here's an example of it with it centered using the offset I showed you above. It waits until the section is directly centered to trigger it.

    link: http://codepen.io/chrisxclash/full/21/15
  • Still not really what I had wanted.. I'll try playing around with the offset some.
  • Sounds good!