jQuery Moving a div with page scroll

Question

I want to move a div based on page scroll, I've already read this question but it's based on pure javascript.

Here's a fiddle I made, here's what I want.

Here's the code:

HTML:

<div class="outer-container">
    <div class="inner-container">
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <div class="slider-content">
                    <h4>The Course</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </p>
                </div>
                <!-- /.slider-content -->
                <div class="clearfix"></div>
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->
        <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
            <div class="slide-inner-container">
                <!-- More content here soon -->
            </div>
            <!-- /.slide-inner-container -->
        </div>
        <!-- /.slide -->


    </div>
    <!-- /.inner-container -->
</div>
<!-- /.outer-container -->

I want the div with class '.slider-content' to move on page scroll just like the reference link

Any help would be appreciated.

I did, I'll update the question with my attempt but I'm not familiar on pageYOffset — chandan, Jun 15 '15 at 16:50
you have semicolons `;` after each css property in you jquery. there is no need for them, in fact, you should not have them at all. http://jsfiddle.net/yak613/657mm7Lz/ — yaakov, Jun 15 '15 at 16:53
@yak613: Sorry, I knew that before and corrected them too but put posted the old link, thanks for pointing out through. — chandan, Jun 15 '15 at 16:59

score 1 · Answer 1 · answered Jun 15 '15 at 17:01

1

Maybe you could use skrollr.js

Check the demo of this website It is similar to what you want

answered Jun 15 '15 at 17:01

Raúl Ruíz R

42
3

Thank you for your suggestion, but it might make things complicated, dealing with an other framework. Custom code would be the most effective way, thank you for your answer though. – chandan Jun 15 '15 at 17:05

score 0 · Answer 2 · answered Jun 15 '15 at 17:10

0

I think using "position:fixed;" is the easiest way. I changed it and it works for me.

Line 23:

.slider-content{
    position: fixed;
    //...
}

And then you can set the position (left, top, ...) to make it look like in the example that you shared.

answered Jun 15 '15 at 17:10

Francisco Vilchez

41
4

thank you but I want the div to disappear after it crosses the parent div which is not possible with position: fixed – chandan Jun 15 '15 at 17:16
not even with this? http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning – Francisco Vilchez Jun 15 '15 at 17:51
using z-index with fixed position seems to be an alternative, let me try that, if it works it will be a far simpler solution. – chandan Jun 15 '15 at 17:57

jQuery Moving a div with page scroll

2 Answers2