Опять JS - плавающее меню
10 сообщений
#18 лет назад
Здравствуйте всем!Сразу же - спасибо за ответы на тему про форматированное число с помощью JavaScript.
Возник новый вопрос - есть меню, которое "плавает" когда прокручиваешь страницу. Меню тут ссылка.
Но как только его вставишь в нормальный HTML документ - со всеми описаниями сразу же перестает работать (в примере меню, документ вообще не полный начинается с тэга body).
Возможно ли как-то сделать что б оно работало в нормальном html? Не очень силен в JavaScript...
Спасибо!
10 сообщений
188 сообщений
#18 лет назад
gravity-rtem, смотрел, не скажу что просто, но и ничего невыполнимого нет!Просто хорошо надо выучить Javascript. Тут наверное, позиционирование относительно правого края+функция плавного ускорения (тоже несложно). Плавно меняется позиция - это функция с увеличем скорости.
И все тут. Конечно, надо посидеть и подумать, но и самому сделать легко. За день-два.
А других шаблонов в сети нет? Видел подобные меню, часто на ВУЗовских сайтах. Поищи лучше.
27 сообщений
#18 лет назад
Если я правильно понял задачу то нужно что-то вроде этого[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div.panel{
height:20px;
border:1px solid black;
position: fixed;
width:200px;
behavior:url("position_fixed.htc");
}
div.content{
height:1800px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="panel" class="panel"></div>
<div class="content"></div>
</body>
</html>
[/code]
position_fixed.htc
[code]
<public:component lightweight='true'>
<public:attach event='ondocumentready' onevent='init_element()' />
<script type='text/jscript'>
/*<![CDATA[*/
/**
* This function initializes coordinates, saving them in two arrays.
* Also it registers two handlers for onresize*onscroll events.
*/
function init_element() {
var doc = window.document,
csscompat = (doc.compatMode == 'CSS1Compat'),
canvas;
if (window.XMLHttpRequest && csscompat
|| currentStyle.position != 'fixed')
return;
else {
style.position = 'absolute';
init_element.scroll_params = (init_element.resize_params
= [(canvas = (csscompat) ? doc.documentElement : doc.body),
parseInt(currentStyle.top) || offsetTop,
parseInt(currentStyle.left) || offsetLeft,
parseInt(currentStyle.bottom), parseInt(currentStyle.right),
canvas.offsetHeight, canvas.offsetWidth]).slice(0, 3);
window.attachEvent('onscroll', element_onscroll);
window.attachEvent('onresize', element_onresize);
}
}
/**
* This function establishes new values of coordinates of an element
* depending on its initial position and a condition of scrolling.
*/
function element_onscroll() {
var params = init_element.scroll_params;
style.top = params[0].scrollTop + params[1] + 'px';
style.left = params[0].scrollLeft + params[2] + 'px';
}
/**
* This function also establishes new values of coordinates
* of an element depending on its initial position and a condition
* of scrolling, and also saves current coordinates.
*/
function element_onresize() {
var params = init_element.resize_params,
height = params[0].offsetHeight,
width = params[0].offsetWidth,
top = (params[3])
? params[1] - (params[5] - height)
: params[1],
left = (params[4])
? params[2] - (params[6] - width)
: params[2];
style.top = params[0].scrollTop + top + 'px';
style.left = params[0].scrollLeft + left + 'px';
init_element.scroll_params[1] = top;
init_element.scroll_params[2] = left;
}
/*]]>*/
</script>
</public:component>
[/code]