Geek Answers Handbook

Hold the item inside the visible part of the window

I set the sidebar element on the right side of the visible part of the screen (this part already works!). The sidebar consists of several divs. Some of them do not bother me, but the last (lowest) should not "disappear" when the user scrolls down the page. And here I am stuck. In a sense, the top position should not be <0 the visible top of the browser window. Is this possible with CSS and better browsers?

Here is my definition of the sidebar:

div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;} div#sidebar div{padding: 5px 0;margin-bottom: 5px}

Here is an element that I would like to keep inside the visible part of the screen:

 div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;} div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}

The second element, “navsoc,” should remain visible. But it moves just like navtop and the others that I defined there.

 <div id="sidebar"> <div id="navsoc"> keep me inside the window! </div> </div>
+4
source share
2 answers

I think you need

 position:fixed;

Thus, the element will be located relative to the window, so if you scroll it, it is always displayed.

Demo: http://jsfiddle.net/mJubt/

Also, if you want to set the !important value, use top:0!important instead of top:!important 0 .

And when you have 0px , you do not need to write a device, you can use only 0 .

+6
source

if you use top in CSS, you must ensure that the position element is not static (default), but absolute , relative or fixed . So top:0 does not work in this case. And if you change the position to any of them, it will behave differently:

if he fixed the element, there will be a position relative to the window if it is relative or absolute, it will be the position zero pixels from the top of the nearest element in the DOM with a position other than static .

If the content of the element above #navsoc is flexible in height, you cannot force it to respect its position and at the same time not scroll. For this you need Javascript.

The first part is a little from the topic back. I think it's good to know!

Here you are fiddle .

0
source

More articles:


All Articles