Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other please help understanding website scrolling behavior

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #45146
    ethanmiller
    Participant

    hi all, i’m trying to replicate the scrolling behavior on [this site](http://www.designweekportland.com/2012). in particular, here are the features that i’m tring to reproduce:

    1) When you scroll **anywhere on the page** it scrolls through the detailed list of events to the right, inside the div .content. once the bottom is reached, then it scrolls the entire page moving to the next major section of the page, each section corresponding to a particular day. the process then repeats and also works in reverse. it doesn’t matter where you scroll, the scroll behavior is always the same.

    2) When you scroll there is only one scollbar slider visible on the far-right. And what is most interesting is that even when you are scrolling through the event list, the scroll bar is still sliding. In other words, somehow the content within the event lists is counted within the length of the entire page within the scroll bar.

    Here is my attempt so far to replicate this: http://codepen.io/ezmiller/pen/xqtjs . The effect works more or less if you use the mouse wheel while hovering over the blue sections to the left. I am not at all sure that I’m going down the right path there though, and I’m also have no clue how to achieve #2 above. If anyone has any insights/tips about how to achieve all this, I’d be very grateful.

    #137382
    CrocoDillon
    Participant

    For the scrolling they use JS to change the class on the `li` elements. Between `above-section`, `active-section`, `mid-section` and `below-section`. You can search the CSS for those classes :)

    #138909
    ethanmiller
    Participant

    @CrocoDillon thanks! I eventually figured this out. [Here](http://codepen.io/ezmiller/pen/tpgbJ) is a codepen where I mostly got it to work.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.