Fixed image beside div until div is scrolled

Kirby 2 Solved ✅
1

Hey guys,

This isn’t really a specific kirby issue. But I’m using kirby and thought one of you fine gentlemen might know what to do.

I currently have a parent blog page setup which is pulling from each children page in the panel. Each child page is an article, and I have that listed all on the blog parent page.

The code looks like this:

<section class="blog two">
    <?php foreach($page->children()->visible()->flip() as $subpage): ?>


        <div class="information">

            <a class="standfirst" href="#"> 

                    <h2 class="blog-title"><?php echo $subpage->name()?></h2>

                    <p><?php echo $subpage->blogdate()->kirbytext()?></p>   
            </a>

            <div class="content">
                     <p><?php echo $subpage->text()->kirbytext()?></p>
            </div>

        </div>  

        <div class="image">
            <?php foreach ($subpage->blogimage()->toStructure() as $item): ?>

                <img class="blog-image" src="<?php echo $item->image()?>">

            <?php endforeach ?>
        </div>

    <?php endforeach ?> 
</section>

And the result looks like this:

So I want the image to stay put in the same place while only the user scrolls the text. Once they get to the bottom. The next article does the same thing.

I was attempting to use http://davist11.github.io/jQuery-Stickem/ but ran into problems since my page is all the content from the cms using foreachs, it gets a bit messy.

If anyone could shed some light on how to start this as a noobie to javascript that would be amazing.

Thanks!

Edit: This is pretty much excatly the basics of what I want. http://jsfiddle.net/e4VzT/90/
But i cannot seem to integrate it into my site and get it work.

2

Judging from the fiddle, all you need is a wrapper around the information and info divs within the foreach loop; and then your information div is “section left” and your image the info div. But what I don’t understand is that you are outputting several images, not just one as in your screenshot?

3

Thanks for the reply Tex.

I have changed my mind about how i want this to work, but to answer your question about the one image.
What your seeing in the screenshot is the first article, there are 3 more underneath it. Each layed out the same.

I want the image on the right to stop scrolling once i scroll to the next article and so forth. It looks like I need to really improve my jquery/js to get this to work.

4

Yes, I understand. Nevertheless, for what you wanted to achieve originally, the second foreach loop for the images is superfluous if one article only has one image.