0

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

Julittok
  • 3
  • 3
  • Just to clarify, why can't you just put #fixed above #about? So that it appears above it and isn't part of the scrolling content? – Kato Nov 08 '11 at 19:44
  • Thanks for you answer Kato, I explained that part at the end "...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." – Julittok Nov 08 '11 at 19:48

2 Answers2

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.

Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Ok Scott that was simply beautiful, some times I'm so fixated with jquery that I can't think or even conceive any css solution, Thank you you solved my problem at once. :) – Julittok Nov 08 '11 at 20:14
  • Great. I would appreciate a vote up and an acceptance of the answer if it worked for you. – ScottS Nov 08 '11 at 20:16
  • I'm sorry Scott I can't vote because I'm to newbie here :( but I choose your answer as my accepted answer. Thank you again – Julittok Nov 08 '11 at 20:29
0

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.

If you change your selector for the fade in/hide commands you can select both/multiple elements. The selectors are just comma separated. Another option would be to create a common class or attribute that all elements you want to hide/fade in share so you can use just one selector.

http://api.jquery.com/multiple-selector/

http://api.jquery.com/attribute-equals-selector/

Gary.S
  • 7,076
  • 1
  • 26
  • 36
  • Thank you Gary.S for you answer I was about to do that until Scott shows up with the Holly Grail :D – Julittok Nov 08 '11 at 20:20