Menu
This is kind of difficult to explain so ill link to a page that has the effect i need;
http://wpaoli.building58.com/wp-content/uploads/2009/08/feedback-panel.html
The feedback thing on the left side is what im trying to implement on my side, instead of feedback im going to use it as a navigation menu that shows up when clicked on.
the things above is what i have right now.
my problem is when i scroll to the right ( my page is around 6000px wide ) i want it to stay on the left side, is there a way to pull this off?
(this is to much for my brain to handle)..thanks!
462
The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
To align a div with fixed position on the right side, we set the right CSS property of the div we want to align to the right side. to add a div with the class test . Then in the CSS code, we select the elements with class test , and set the right property on it.
To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.
Set the div to have a "position:fixed" style and then set "left:0px;top:0px". This makes the div stick to the top left of the browser instead of its relative position within the HTML flow.
Have a look at this example page, it has 2 fixed elements, one at the top left and the other at the bottom right:
Fixed example
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
