Опять JS - плавающее меню

10 повідомлень

#16 років тому

Здравствуйте всем!
Сразу же - спасибо за ответы на тему про форматированное число с помощью JavaScript.

Возник новый вопрос - есть меню, которое "плавает" когда прокручиваешь страницу. Меню тут посилання.

Но как только его вставишь в нормальный HTML документ - со всеми описаниями сразу же перестает работать (в примере меню, документ вообще не полный начинается с тэга body).

Возможно ли как-то сделать что б оно работало в нормальном html? Не очень силен в JavaScript...
Спасибо!

12 повідомлень

#16 років тому

Это с помощью css делается по-моему.
position:static свойство

221 повідомлення

#16 років тому

При заходе на ссылку перекидывает на главную ....

10 повідомлень

#16 років тому

Да, можно сделать и с помощью css, но мне кажеться оно не будет плавно передвигаться.

вот эта статья посилання

188 повідомлень

#16 років тому

gravity-rtem, смотрел, не скажу что просто, но и ничего невыполнимого нет!
Просто хорошо надо выучить Javascript. Тут наверное, позиционирование относительно правого края+функция плавного ускорения (тоже несложно). Плавно меняется позиция - это функция с увеличем скорости.
И все тут. Конечно, надо посидеть и подумать, но и самому сделать легко. За день-два.
А других шаблонов в сети нет? Видел подобные меню, часто на ВУЗовских сайтах. Поищи лучше.

27 повідомлень

#16 років тому

Если я правильно понял задачу то нужно что-то вроде этого



<!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>

position_fixed.htc



<public:component lightweight='true'> 

<public:attach event='ondocumentready' onevent='init_element()' />

<script type='text/jscript'>

/*<!).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.scrollTop + params + 'px';

    style.left = params.scrollLeft + params + '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.offsetHeight,

        width = params.offsetWidth,

        top = (params)

               ? params - (params - height)

               : params,

        left = (params)

                ? params - (params - width)

                : params;

    style.top = params.scrollTop +  top + 'px';

    style.left =  params.scrollLeft + left + 'px';

    init_element.scroll_params = top;

    init_element.scroll_params = left;

}

/*]]>*/

</script>

</public:component>