Position Fixed, able to scroll too?

HTML & CSS
1

I have an element which is fixed towards the bottom left of the browser but not at the very bottom about 3 quarters from the top.

Its fixed as i need it to stay there as you sideways scroll content behind it.

This all works fine apart from when you have a smaller browser size.

As its fixed and the page loads smaller you cannot scroll to it.

Is there anyway around this, as it needs to work the same in all browser sizes?

I fear not :frowning:

2

Yeah thats what i’ve been trying to do and it works to a degree, but there is a gap between the normal style sheet at the lower res and the normal one.

Means i have the problem of scrolling to the box in that gap.

Is it not possible because of how the fixed style works?

3

Do you have a working link? Or code to take a look at?

4

Try using a % value to define how far from the top of the document you want it to appear. That way it should scale to any size viewport given a bit of tinkering…

5

Its the project information box here…

Make the browser smaller and you’ll see what i mean…

6

Thanks a lot for your input guys, much appreciated :slight_smile:

7

When I resize the window from left to right, the class .lower1024 gets added to #projects-wrapper and “top:615px;” gets overwritten to “top:90%”

#projects-wrapper.lower1024 {
  bottom:0;
  top:90%; /* overwrites #projects-wrapper */
}

#projects-wrapper {
  height:64px;
  left:0;
  padding:0 0 0 20px;
  position:fixed;
  top:615px; /* gets overwritten when screen sized in */
  width:100%;
  z-index:99;
}

So, I assume there is some javascript that is dynamically adding the class to it and bumping it down from the top 90%.

Take that 90% out and you should be good to go.

8

That makes more sense now! I think that’s what the .lower1024 is trying to do. That’s why it’s code looks like this:


#projects-wrapper.lower1024 {
  bottom:0;
  top:90%;
}

Using the bottom and top attribute are to ensure it’s down at the bottom, but not so far down that it looks bad. And the class is added automatically when the JS detects a small viewport.

So, Jez, I think the way it’s set up right now is the best. Most people who have small screen resolutions aren’t going to have small ones only horizontally, so that means there won’t be a space between your images & your “project details”, it may end up being on top of the images some, but really what Rayzur is saying is what you have is actually the best thing you could have.

9

If you want to insure access to it for all viewports then you would need to use bottom:0; and let lay on top of the images whenever that condition happens.


#projects-wrapper {
height:64px;
left:0;
padding:0 0 0 20px;
position:fixed;
[COLOR=Red]/*top:615px;*/[/COLOR]
[COLOR=Blue]bottom:0;[/COLOR]
width:100%;
z-index:99;
}
#project-box {
background-color:rgba(255, 255, 255, 0.9);
padding:10px;
position:fixed;
[COLOR=Red]/*top:405px;*/[/COLOR]
[COLOR=Blue]bottom:0;[/COLOR]
width:780px;
}
10

Hi,
To answer your question, there is no way around it.
Fixed elements are positioned in relation to the Viewport and if there is not adequate space available it will go below the fold and position itself out of sight. It is still there but you cannot scroll to a fixed element. That is why it is best for them to be near the top of a page.

As you are aware, you have no control of your users screen size. Some people have several toolbars stacked up on their browser head and that pushes the top of the Viewport down even further.