Фиксированная чёрная полоса внизу экрана, при прокрутке становится полупрозрачной. При наведении мышки на полосу - становится активной.

Между тегами <head> ставим:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					if(scrollTop != 0)
						$('.ac_footer').stop().animate({'opacity':'0.2'},400);
					else	
						$('.ac_footer').stop().animate({'opacity':'1'},400);
				});
				
				$('.ac_footer').hover(
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('.ac_footer').stop().animate({'opacity':'1'},400);
						}
					},
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('.ac_footer').stop().animate({'opacity':'1'},400);
						}
					}
				);
            });
        </script>
Перед закрывающим тегом </body> ставим:

Код: Выделить всё

<div class="ac_footer">
		<a href="#" class="ac_left"><span>Левая</span> ссылка</a>
		<a href="#">Правая ссылка</a>
</div>
Вместо ссылки можно поставить просто надпись или стрелку вверх. Можно соорудить навигационное меню. Всё на ваше усмотрение и фантазию.

В тему стиля:

Код: Выделить всё

.ac_footer {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    font-size: 13px;
    height: 20px;
    left: 0;
    opacity: 0.9;
    padding-bottom: 5px;
    position: fixed;
    width: 100%;
    z-index: 999;
}
.ac_footer a {
    font-family: 'PT Sans Narrow',Arial,sans-serif;
    color: #DDDDDD;
    float: right;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    text-shadow: 1px 1px 1px #000000;
    font-size: 11px;
    text-transform: none;
}
.ac_footer a:hover {
    color: #FFFFFF;
}
.ac_footer a span {
    font-weight: bold;
}
.ac_footer a.ac_left {
    float: left;
}
background: none repeat scroll 0 0 #000000; - цвет полосы.
color: #FFFFFF; - цвет текста.
Комментарии: 32

CabinetAdmin 18 апр 2013, 16:01 Сообщение

Размер в .ac_footer a {:

Код: Выделить всё

font-size: 11px;
Чтобы жирным сделать шрифт, добавь:

Код: Выделить всё

font-weight: bold;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 20 апр 2013, 10:44 Сообщение

При прокрутки страницы , полоса становится полупрозрачной. Как меняется эта функция ?
  • 0

CabinetAdmin 20 апр 2013, 11:10 Сообщение

В скрипте:

Код: Выделить всё

$('.ac_footer').stop().animate({'opacity':'0.2'},400);
0.2 это степень прозрачности.
1 не прозрачно, 0 полностью прозрачно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!