Position fixed related to the div I choose? jquery?

Question

Is this possible? you can se my problem here: http://granjalaaurora.com/test/test-jscrollpane.html

I have this structure:

<div id="content">
        <div id="about" class="scroll-pane">

                    <div id="fixed">Non scrollable text goes here.</div>

                    <p>Scrollable text goes here</p>
</div>

The "about div" has class="scroll-pane", and I can't remove that class from there because the jquery breaks. And I say well, now what if I want part of the about div "non scrollable" Everything within the about div will scroll, unless I put a div with fixed position inside it, but it has to be fixed in relation to the content div, or it wont "go down" when I change the section.

And that's my problem, other thing the div with non scrollable content can't be outside the about div because i't will not respond to the fade in and hide commands.

Any ideas?

Thanks in advance

Answer 1

My solution to a similar problem might help. See Position element fixed vertically, absolute horizontally for that. I've adapted the code for what I think will work for you (EDITED to match your code more):

HTML

<div id="content">
  <div id="about" class="scroll-pane">
     <div class="inflow">
        <div class="fixed">Non scrollable text goes here.</div>
        <p>Scrollable text goes here</p>
     </div>    
  </div>               
</div>

CSS

div.inflow {
  border: 1px solid blue;
  position: relative;
  height: 1000px;  /* just for illustration */
}

div.inflow p {
      margin-top: 1.5em; /*you need to determine space you need for the fixed element */
}

div.fixed {
  border: 1px solid red;
  position: fixed;

}

You might be able to get rid of the inflow div and apply those styles directly to the scroll-pane div.