Solved

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

Posted on 2014-12-23
3
154 Views
Last Modified: 2014-12-23
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
Comment
Question by:slightlyoff
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40514963
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
 
LVL 1

Author Comment

by:slightlyoff
ID: 40514992
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
 
LVL 1

Author Closing Comment

by:slightlyoff
ID: 40515039
That's perfect, thank you for your help!!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now