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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to set up a div so it follows the scroll when scrolling down a browser

    Hi,

    Can someone help me recreate how to make this effect seen in this example?
    http://kerrynehil.com/work/hot-studio/

    I want to be able to set up a left side Div which stays at the top of the browser when scrolling down. I also want to re create the smooth follow seen on the above example website that i provided.

    Any help will be very grateful!

    Thank you.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Set the position of the div to "fixed" and then set the top and left to wherever you want.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    43
    Thanks
    21
    Thanked 1 Time in 1 Post

    This is better handled with CSS

    As WolfShade noted, set the positioning to fixed and set specific coordinates for margin-top and margin-left. What he didn't mention is that this is done normally through CSS. Here is a floating div declaration in the CSS file of a project I'm working on:
    Code:
    .overlay div 
      {
      position: fixed;
      width:400px;
      height: 300px;
      top: 20%;
      left:50%;
      margin-left: -200px;
      margin-top: -150px;
      background-color: #fff;
      border:1px solid #000;
      padding:15px;
      text-align:center;
      }
    While you can adjust CSS properties with javascript, if this div is going to be constantly on the page, you'd be better off declaring the div style in your CSS file.

  • Users who have thanked jkurrle for this post:

    joelbrandman (09-10-2012)


  •  

    Tags for this Thread

    Posting Permissions

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