Solved

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

Posted on 2014-12-23
3
161 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 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Suggested Solutions

Title # Comments Views Activity
Anyone familiar with PhotoSwipe? 3 38
jQuery element reference issue 2 35
NOT having JQuery DataTable Columns Sort 7 33
Jquery syntax 12 23
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

738 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