Keep Site Logo Stationary When Scrolling

**mikevine** · 03-23-2010, 01:54 AM

1) Script Title: Keep Site Logo Stationary When Scrolling

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/logo.htm

3) Describe problem: What code in the Site Logo/Watermark script would I edit to keep the logo stationary when scrolling up or down the page? I only want the fade-in effect. Is it true that this script will not work in IE browsers? I tried IE5, 7, and 8, and no logo appears. It works fine in Safari and Firefox. Is there other scripts that will work with all 3 browsers with the functionality I'm looking for?
My testing URL: http://mldesign1.home.comcast.net/~mldesign1/
Thanks for any help on this.

**jscheuer1** · 03-23-2010, 05:25 AM

If all you want is for the logo to fade in, you don't need a Site Logo/ Watermark Script script for that. Using just the jQuery library and a little bit of css, HTML and javascript code would be sufficient*.

The script works fine in IE though, just check the demo page on Dynamic Drive in that browser. However, one must follow the instructions on the demo page (particularly):

Important Note: Your page should contain a valid doctype at the very top for this script to work properly. If your page doesn't, the logo will be made stationary on the page via scripting instead of CSS, which is less smooth.

*Demo of fading in logo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#logo {
	height: 110px;
	text-align: right;
}
#logo img {
	width: 276px;
	height: 110px;
	border: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">#logo img { display: none; }<\/style>');
jQuery(function($){
	$('#logo img').fadeIn(3000);
});
</script>
</head>
<body>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<div id="logo">
<a href="http://www.google.com/"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt=""></a>
</div>
</body>
</html>

**mikevine** · 03-23-2010, 12:23 PM

jscheuer1,
Thanks for the fast response. I tried adding the code you put on the post, but after the logo is done fading in, it gets cut off by the burgundy stripe graphic (will be editing this graphic later) in the table. I don't know if I inserted the code in the correct place. I tried different locations, but then the logo is not in the upper left corner where I would like it to be. I need the logo to float above all page elements. Also, to position the logo more precisely, do you know the code to add x,y coordinates? Thanks for your help!

**jscheuer1** · 03-24-2010, 01:10 AM

Add to the #logo selector (highlighted):

Code:

#logo {
	height: 0px;
	text-align: left;
	position: relative;
}

That will get it so it isn't partially covered by the burgundy stripe. Then to position it more precisely, you may add top and left (just as examples):

Code:

#logo {
	height: 0px;
	text-align: left;
	position: relative;
	top: -3px;
	left: 4px;
}

**mikevine** · 03-24-2010, 11:29 AM

John, thanks again for your quick response and solution.
Mike

Thread: Keep Site Logo Stationary When Scrolling

Thread Tools

Search Thread

Keep Site Logo Stationary When Scrolling

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions