Codice:
// Scrolling bar - version 1.4
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>
//
// --------------------------------------------------------------------
// Set values to adjust effects for your layout
// --------------------------------------------------------------------
// The ID of div to move
myObjectToMove = "simuove";
// Stickyness of the movement (in pixels)
myStickyPixels = 300;
// Scrolling bar may contain a button to stop the sliding effect:
// <a href="#" onclick="javascript:switchRecursion()">Stop/Restart</a>
//
// User choice will be stored in a cookie, and will be remembered by the script
// while that user browses your website
//
// Moreover you can set a Javascript variable to make the menu fade in
//
// <script type="text/javascript">
// isFront = true;
// </script>
//
// <style type="text/css">
// #scrollingmenu { visibility:hidden }
// </style>
// --------------------------------------------------------------------
// YOU DO NOT NEED TO MODIFY ANYTHING BELOW THIS LINE UNLESS YOU KNOW
// WHAT YOU ARE DOING. IF YOU NEED MORE INFORMATIONS, SEND ME A MESSAGE
// --------------------------------------------------------------------
// Initialization for scrolling menu
var myCurrentScrollTop = 0;
var myDeltaScrollTop = 0;
var myDx = 0;
var myDy = 0;
myInterval = 50;
// Function: createCookie
// Input parameters: name of the cookie, value to store, expiration days
// Output parameters: none
// Side effects: create a new cookie for storing values
//
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
// Function: readCookie
// Input parameters: name of the cookie to read
// Output parameters: value stored
// Side effects: none
//
function readCookie(name) {
var nameEQ = name + "=";
var cookieValues = document.cookie.split(';');
for(var i=0; i < cookieValues.length; i++) {
var aValue = cookieValues[i];
while (aValue.charAt(0)==' ') aValue = aValue.substring(1, aValue.length);
if (aValue.indexOf(nameEQ) == 0) return aValue.substring(nameEQ.length, aValue.length);
}
return null;
}
// Function: setOpacity
// Input parameters: object, opacity to set
// Output parameters: none
// Side effects: changes visibility property of the object
//
function setOpacity(obj, opacity) {
opacity = (opacity >= 99)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
// Function: fadeIn
// Input parameters: object to show, name of variable, opacity to set, increasing opacity step, opacity upper limit
// Output parameters: none
// Side effects: changes visibility property of the object
//
function fadeIn(objectToFade, objectName, opacity, step, limit) {
if (opacity < limit) {
setOpacity(objectToFade, opacity);
opacity += step * ( 1 - (opacity/100.0));
window.setTimeout("fadeIn("+objectName+", '"+objectName+"', "+opacity+", "+step+", "+limit+")", 200);
}
}
// Function checkLocation
// Input parameters: object to move, previous position
// Output parameters: none
// Side effects: updates position of given object on scrolling up/down the page
//
function checkLocation(obj,offs) {
if (navigator.appName.indexOf("Netscape")!= -1) {
myCurrentYPos = window.pageYOffset;
}
else {
if (document.documentElement && document.documentElement.scrollTop) {
myCurrentYPos = document.documentElement.scrollTop;
}
else {
myCurrentYPos = document.body.scrollTop;
}
}
// Menu will start moving after a scrolling of at least myStickyPixels pixels
if ( myCurrentYPos > myStickyPixels || myCurrentYPos < myPreviousYPos ) {
myDeltaY = Math.max(myCurrentYPos - myStickyPixels, 0) - myYPos ;
// Check if is too close to its target
if ( (myDeltaY >= 6) || (myDeltaY <= -6) ) {
// If abs(delta) < 6, round = 0, so it is useless to execute the following code
myStepY = Math.round( myDeltaY / 12);
// The new position needs to be positive or zero
if ( myYPos >= -myStepY ) {
myYPos += myStepY;
obj.style.top = myYPos + "px";
}
}
}
// We want to check if user has scrolled current page or not
if (offs != myCurrentYPos) myPreviousYPos = offs;
// If the slider hasn't been blocked, reschedule all the checks
if (isRecursive == "true") {
setTimeout("checkLocation(obj,"+myCurrentYPos+")", myInterval);
}
}
// Function switchRecursion
// Input parameters: none
// Output parameters: none
// Side effects: set to true/false isRecursive variable, to start/stop checkLocation execution,
// and writes new value into the cookie
//
function switchRecursion() {
if (isRecursive == "false") {
isRecursive = "true";
createCookie("isRecursive", isRecursive, 365);
checkLocation(obj,myYPos);
}
else {
isRecursive = "false";
createCookie("isRecursive", isRecursive, 365);
}
}
window.onload = function(e) {
// Get the objects with given ID
if (document.getElementById(myObjectToMove)) {
obj = document.getElementById(myObjectToMove);
}
else if (eval("document."+myObjectToMove)) {
obj = eval("document."+myObjectToMove);
}
else {
obj = eval(myObjectToMove);
}
// Another cookie tells us if the menu is sticky or not
isCookieRecursive = readCookie("isRecursive");
isRecursive = (isCookieRecursive != null && isCookieRecursive != undefined && isCookieRecursive != "") ? isCookieRecursive : "true";
isFrontPage = (isFront != null && isFront != undefined && isFront != "") ? isFront : false;
// Netscape and compatible browsers use the WINDOW object for
// storing window's properties
//
if (navigator.appName.indexOf("Netscape")!= -1) {
myYPos = window.pageYOffset;
}
else {
// Internet Explorer 6 changed implementation of its DOM, renaming
// document.body into document.documentElement
//
if (document.documentElement && document.documentElement.scrollTop) {
myYPos = document.documentElement.scrollTop;
}
else {
// This applies to older IE browsers
myYPos = document.body.scrollTop;
}
}
myPreviousYPos = myYPos;
// Let the menu fade in (only in front page)
if (isFrontPage) {
setOpacity(obj, 0);
obj.style.visibility = "visible";
fadeIn(obj, "obj", 0, 25, 99);
}
else {
obj.style.visibility = "visible";
}
// And now move it up and down, depending on cookie value
if (isRecursive == "true") {
checkLocation(obj, myYPos);
}
}
Questo lo metti nel css: