Menu
I am writing a glossary page. I have the alphabet links on the top of the page. I want to keep the top of the page (including the alphabet links) fixed, whilst the section of the page with the definitions, scrolls up/down as an alphabet is clicked.
My HTML looks a bit like this:
<html> <head><title>My Glossary</title></head> <body> <div id="top"> <a href="#A">A</a> | <a href="#B">B</a> | <a href="#Z">Z</a> </div> <div id="term-defs"> <dl> <span id="A"></span> <dt>foo</dt> <dd>This is the sound made by a fool</dd> <!-- and so on ... --> </dl> </div> </body> </html> [Edit]
The kind of effect I am trying to create is similar to the one here. The difference being that in the example in the link, the page scrolling is done when a user clicks on a category. In my case, I want to scroll the page when an index (i.e. an alphabet) at the top of the page, is clicked.
508
The vertical position of the element to be stuck can also be modified with the help of the 'top' property. It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.
The position Property Setting position: absolute on an element lets you use the CSS properties top , bottom , left , and right to move the element around the page to exactly where you want it. For example, setting top: 1em move the element so its top is 1em from the top of the page. That will display like this.
If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. If position: relative; - the top property makes the element's top edge to move above/below its normal position.
Yes, there are a number of ways that you can do this. The "fastest" way would be to add CSS to the div similar to the following
#term-defs { height: 300px; overflow: scroll; } This will force the div to be scrollable, but this might not get the best effect. Another route would be to absolute fix the position of the items at the top, you can play with this by doing something like this.
#top { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 23px; } This will fix it to the top, on top of other content with a height of 23px.
The final implementation will depend on what effect you really want.
155
You can do something like this:
<html> <head><title>My Glossary</title></head> <body style="margin:0px;"> <div id="top" style="position:fixed;background:white;width:100%;"> <a href="#A">A</a> | <a href="#B">B</a> | <a href="#Z">Z</a> </div> <div id="term-defs" style="padding-top:1em;"> <dl> <span id="A"></span> <dt>foo</dt> <dd>This is the sound made by a fool</dd> <!-- and so on ... -> </dl> </div> </body> </html> It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div. The background and width are there to cover the contents of the term-defs div as they scroll under the top div.
Hope this helps.
38
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
