1

I have a parallax style home page which calls in x-number of instances from a db for each section. So for instance I have a section called 'films' with 3 films being called to display on the home page.

While the user is scrolling through the '3 films', I'd like the header of the whole films section to stay fixed just below the main site header.

I am familiar with adding/ removing/ toggling classes via jquery according to scroll/px, but because the height of each section will change dynamically, I'm not sure how to achieve this. Also the height of some section are defined by users screen size, not px.

Is there a way to toggle a class according to what section you're scrolling through? So for instance if scrolling through div-1, make header-1 position fixed... if scrolling through div-2, make header-2 position fixed... etc.

Here's a jsfiddle as a starting point, I left the js section blank as what I came up with does not seem to be working anyways. For the sake of making everything easy, I just defined the height of each section to 1000px, but in the real scenario, this will be changing dynamically. http://jsfiddle.net/ericbrockman/2ZNw6/1/

here's the markup:

<nav id="nav-main">
    <ul>
        <li><a href="#slide1">Slide 1</a></li>
        <li><a href="#slide2">Slide 2</a></li>
        <li><a href="#slide3">Slide 3</a></li>
    </ul>
</nav> <!-- #nav-main -->

<section id="slide1" class="slide">
    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
    </article>
</section> <!-- #slide1 .slide -->

<section id="slide2" class="slide">
    <hgroup id="header-home-slide2">
        <h2 class="section-title">Slide 2</h2>
    </hgroup>

    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p> 
    </article>
</section> <!-- #slide2 .slide -->

<section id="slide3" class="slide">
    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
    </article>
</section> <!-- #slide3 .slide -->

and styles:

#nav-main {
    position: fixed;
    top:0;
    z-index: 2;
}

#nav-main ul {
    position: fixed;
    top:0;
    background: #ccc;
    padding: 10px;
}

#nav-main ul li {
    display: inline;
}

.slide {
   height: 1000px;
   position: relative;
}

.sticky {
    position: fixed;
    top: 0;
}

#slide1 {
    background: none repeat scroll 0 0 #FFFFFF;
}

#slide2 {
    background: none repeat scroll 0 0 #FFFFFF;
}
4
  • That link doesn't have anything on it that shows us what you have already. At least put together a js fiddle with how far you got, so we can help you finish.
    – degenerate
    Feb 15, 2014 at 20:45
  • Thanks @degenerate I'll look into how to do that. Feb 15, 2014 at 20:58
  • Okay, hopefully that will help make things clearer, thanks again! Feb 15, 2014 at 21:13
  • I found this fiddle, which works well if heights are defined by pixels, but again not if height is defined dynamically or according to user's screen height jsfiddle.net/gLWxF Feb 15, 2014 at 21:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.