• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 173
  • Last Modified:

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!!!
0
slightlyoff
Asked:
slightlyoff
  • 2
1 Solution
 
GaryCommented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now