Linker IT Software
Google
Web www.oraxcel.com
menubar-top-links menubar-top-rechts
Home Help Search Login
Welcome, Guest. Please Login.
SQL*XL: Database to Excel bridge litLIB: Excel power functions pack ExcelLock: Locking and securing your valuable Excel spreadsheets encOffice: Protect your Excel file easy and safe encOffice: Protect your Excel file easy and safe
Pages: 1
HTML - positioning on the window onscroll event (Read 8415 times)
Gerrit-Jan Linker
YaBB Administrator
*****




Posts: 75
HTML - positioning on the window onscroll event
07.08.07 at 16:26:47
 
HTML - positioning on the window onscroll event
 
I want to keep a block of content in HTML always visible at the top of a window even when the user scrolls down.
 
To do this you need to capture the window.onscroll event. You want to be able to set a new top of the block of content when the window is scrolled. To get a javascript event handler for the window.onresize event you can use the following code in the head of your HTML document:
 
Code:
window.onscroll = window_onscroll;

function window_onscroll()
{
  alert('scrolling!');
}
 


 
Now we need the content that we want to keep at the top of the window to be easially identified. I placed the content in a div box (forgive all the style info):
Code:
<DIV id=a
 style ="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 30px; BORDER-BOTTOM: 1px solid; POSITION: absolute; TOP: 150px; HEIGHT: 30px"></DIV>
 


 
Then it is just a matter of setting the top of this div box a whenever the window scrolls:
Code:
a.style.top = document.body.scrollTop;
 


 
The full code of the demo page is attached.
Back to top
« Last Edit: 07.08.07 at 16:35:10 by Gerrit-Jan Linker »  

Gerrit-Jan Linker
Linker IT Software
Email WWW Gerrit-Jan Linker   IP Logged
Gerrit-Jan Linker
YaBB Administrator
*****




Posts: 75
Re: HTML - positioning on the window onscroll even
Reply #1 - 07.08.07 at 16:59:55
 
I have applied this code now to this board to show the Google ads (adwords) even when the user scrolls down. I added a div around the google adwords code, gave it an ID and put the style to POSITIONING:absolute.
Back to top
 
 

Gerrit-Jan Linker
Linker IT Software
Email WWW Gerrit-Jan Linker   IP Logged
Pages: 1