Left column scrolling, other options then scrollba

Question

I have a question about easy scrolling through content in html/css. This is what I have:

In the left column I have my data. In the right column I load an iframe when you click on a link in the left column. Does someone know how I can easily scroll but that my right iframe stays in that position?

This is my html code: (I used bootstrap)

<div class="row">
      <div class="span6">
            <div class="row" id="errors">
                 <div class="span6>
                 </div>
                 <div class="span6>
                 </div>
                 ....
            </div>
       </div>
       <div class="span6">
            <div id="side-content">
                <iframe id="iframe" src="" scrolling="no" frameborder="0"></iframe>
            </div>
       </div>
</div>

Answer 1

Try setting the height of the iFrame the same height as the column of the left. Then make the overflow scrollable when needed. This would work if you know the height of the iFrame.

#errors{
    height:400px;
    overflow-y:auto;
}
#side-content{
   height:400px;
}

Answer 2

You could try something like the following.

$win = $(window);
    $win.on('scroll', function() {
        $("#side-content").css({"position":"absolute", "top":"0"}, $win.scrollTop() > 1);
    });

The idea behind this is the same as a sticky header menu when a user scrolls beyond a certain point. Since you always want it to stay there, if a user scrolls more than 1 pixel it will go back to top: 0. So it will almost be unnoticeable to the user.

If you try that and don't want it, you could also maybe just use

#side-content { position: fixed; top: 0; }

but that won't work if your #slide-content height is greater than the window obviously