Solved

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

Posted on 2011-09-27
6
244 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
[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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

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
migrating to phpbb forum from vBulletin 4.2 3 93
HTML editor custom button 3 84
Web page design problem 3 41
Scroll 5 news at a time using vticker 2 39
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

739 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