Solved

Having a Div overlap other divs, but still scroll with the page.

Posted on 2011-09-27
6
239 Views
Last Modified: 2012-05-12
I am trying to get a div tag that I have overlapping other divs with the "z-index" and 'position' rules. Everything looks good except the div stays put even when the page scrolls. Is there a way to get this fixed position div to scroll with the rest of the page?
0
Comment
Question by:RNB
  • 3
  • 2
6 Comments
 
LVL 5

Expert Comment

by:Rainverse
ID: 36711646
0
 

Author Comment

by:RNB
ID: 36711774
@Rainverse:

I want the fixed div to scroll. On the link you sent the navigation box stays where it is and the page scrolls behind it. I want the fixed div to scroll with the page.
0
 
LVL 5

Expert Comment

by:Rainverse
ID: 36711801
You want the content in the div to scroll while the main window is scrolling. Am I understanding you now?

-MJC
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:RNB
ID: 36711897
@ Rainverse:

Yea I am only using this method for its overlapping capabilities. I do want it to scroll with the rest of the page though.
0
 
LVL 5

Expert Comment

by:Rainverse
ID: 36712056
Try this javascript:

window.onscroll = function () {
  document.getElementById("divID").scrollTop = document.body.scrollTop;
}

Open in new window


-MJC
0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 250 total points
ID: 36720194
Hi RNB,
Looks like your parent div needs: position: relative;
You need to have your absolute positioned div relative to the next outside div. Right now it sounds like your div is positioned relative to the browser window. Once you add this code you will have to adjust your top: ,  left: , bottom: , right: , (whichever ones you used). Because now it will be using the parent div as a reference.

Do you have some code or a Url we can look at?
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css issues with IE 11 8 33
How would I do a website like this? 5 54
How to call weather service by using asmx? 4 29
Which non-HTML GUI front end to use with Java? 3 21
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

785 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