?
Solved

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

Posted on 2014-12-23
3
Medium Priority
?
166 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

777 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