Change vertical location of nested div depending on location of scroll bar

So imagine the following scenario:

<div class="row">
      <div class="col-md-4">Product Image Here</div>
      <div class="col-md-8">Product Description Here</div>
</div>
<div class="row">
     <div id="priceSectionContainer" class="col-md-4">
              <!-- This DIV contains Starting Price, Options Price, and Current Total -->
              <div id="priceSection">
                  <p>Price: $5.00</p>
                  <p>Options:$2.00</p>
                  <p>Total: $7.00</p>
             </div>
     </div>
     <div class="col-md-8">
     <!-- This section contains a series of options that affect price.  Sometimes there are 10+ option groups.  When the user scrolls down to see the bottom options, they need to scroll backup to see the price. -->
               <ul>
                    <li>List of Dropdown options here</li>
                    <li>List of Dropdown options here</li>
                    <li>List of Dropdown options here</li>
                    <li>List of Dropdown options here</li>
               </ul>
     </div>
</div>

Open in new window


It would be cool if the priceSection div floated inside it's container as the user scrolled down the options.
At the same time, I don't want the price information to float higher on the left side than the top of the options DIV or float lower than the bottom of the options DIV.

I thought perhaps I could connect the padding-top property for "priceSectionContainer" to the scroll bar using jQuery - but since the priceSection/option section doesn't appear until 2/3rds down the page, I don't want the scrolling to start until the priceSection is visible.

I'm not necessarily looking for a solution to this, more of a - can it be done and what should I look for to find out how.
I hope my question makes sense :)

Thanks for your time!!!
LVL 1
slightlyoffAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Do you mean something like this
http://stickyjs.com/

A sticky element? You set the top position etc where it kicks in and "floats"
0
 
slightlyoffAuthor Commented:
Quite possibly.  I will check it out.
The key is the sticky section being constrained by the div it's in.  I will give it a try.

Thanks for the quick response!
0
 
slightlyoffAuthor Commented:
That's perfect, thank you for your help!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.