Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help to create always visible scrolling sidebar

    Would like to get some help for something I'm trying to accomplish on a website. I'm not positive JavaScript is needed for it, but a few examples I saw of it did. Some sort of scroll follow function. I am still green in HTML and CSS, so there could be things I am missing there too that would help (simplified code pasted below).

    What I want to accomplish can be seen on linked graphic. The top purple box is static at top of page. The orange box expands down when links are clicked. When different links are clicked, the yellow box has a script to show some additional links inside of it. I want this box to always be visible at the right, including when the viewer is at the bottom of the expanded orange area. Is there a simple script to help this? It would be at top of green-border box initially, but move to be at top of screen when scrolled down.

    Code:
    <div id="red_container" style="border:2px solid red; min-height:100%; padding:5px; position:relative; width:946px;">
    
    <div id="purple_box" style="background-color:purple; float:left; height:300px; position:relative; width:946px;"></div>
    
    <div id="green_container" style="border:2px solid green; float:left; margin-top:20px; padding:5px; position:relative; width:931px;">
    <div id="expanding_orange" style="background-color:orange; float:left; min-height:900px; top:0px; width:710px;"></div>
    <div id="floater" style="background-color:yellow; margin-left:10px; min-height:300px; position:absolute; top:7px; width:211px;"></div>
    </div>
    
    </div>
    Attached Thumbnails Attached Thumbnails Help to create always visible scrolling sidebar-scrolling-sidebar.gif  


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •