ВОТ ВЕРСТКА
<?php include('fast_menu.tpl.php'); ?>
<div class="box_top_all2_mobi">
<div class="top_all2_mobi">
<table class="top_all2_mobi_table">
<tr>
<td rowspan="2" class="top_all2_mobi_table_planet">
<a class="top_all2_mobi_table_button_foot"></a>
</td>
<td align="right" class="top_all2_mobi_table_td_top_left">
<a href="" class="top_all2_mobi_table_button_info">О сайте</a>
<a href="" class="top_all2_mobi_table_button_news">Новости</a>
</td>
<td align="right" class="top_all2_mobi_table_td_top_right">
<a href="http://www.all2.mobi/guestbook" class="top_all2_mobi_table_button_review">Отзывы</a>
<a href="http://www.all2.mobi/forum" class="top_all2_mobi_table_button_forum">Форум</a>
</td>
</tr>
<tr>
<td colspan="2" align="right" class="top_all2_mobi_table_td_foot">
<a href="" class="top_all2_mobi_table_button_catalog">Каталог телефонов</a>
</td>
</tr>
</table>
САМА МЕНЮШКА НА ЧЕРНОМ ФОНЕ
<script type="text/javascript">
//Функция которая фиксирует контент
function Scroll_Tst(){
var WinTop = $(window).scrollTop();
var WinBottom = WinTop+$(window).height();
$(".middle_all2_mobi").each(function (j) {
var a=$(this);
var Top = a.position().top;
var Bottom = Top+a.height();
var b = a.find("a.middle_button_top_menu");
var b_Heig = b.outerHeight() + 20; //20 - отступ от низа
if(Top > WinTop||Bottom < WinTop||Top > WinBottom) { // container либо вне поля видимости, либо не
$(this).attr('class','middle_all2_mobi'); return true;} //влотную к верху экрана;
if(Bottom > WinTop && Top < WinTop ){ //container влотную к верху экрана;
if(Bottom - b_Heig > WinTop){$(this).attr('class','middle_all2_mobi top-visible');
} else {$(this).attr('class','middle_all2_mobi top-visible-fix')}
return true;}
});
}
var TimScroll;
var Ready = true;
$(window).scroll(function(){
if(Ready){Ready = false; clearTimeout(TimScroll);
Scroll_Tst()
TimScroll=setTimeout("Ready = true",10);
}
});
//Функция которая позволяет поднять и опустить меню
$(document).ready(function () {
$('.middle_button_top_menu').click(function () {
$('.box_top_all2_mobi').slideDown('slow');
return false;
});
$('.middle_button_top_menu').click(function(){
if($.browser.safari){
bodyelem = $("body")
} else{
if($.browser.opera){
bodyelem = $("html")
} else{
bodyelem = $("html,body")
}
}
bodyelem.animate({scrollTop: 0});
return false;
});
});
$(document).ready(function () {
$('a.top_all2_mobi_table_button_foot').click(function () {
$('.box_top_all2_mobi').slideUp('faste');
return false;
});
$('a.top_all2_mobi_table_button_foot').click(function(){
if($.browser.safari){
bodyelem = $("body")
} else{
if($.browser.opera){
bodyelem = $("html")
} else{
bodyelem = $("html,body")
}
}
bodyelem.animate({scrollTop: 0});
return false;
});
});
</script>
</div>
</div>
<div class="middle_all2_mobi"><!-- Блок в которой должна быть фиксированная кнопка -->
<table class="middle_all2_mobi_table">
<tr>
<td class="middle_all2_mobi_table_planet"></td>
<td class="middle_all2_mobi_table_scratches"></td>
</tr>
</table>
<a href="" class="middle_button_top_menu"></a> <!-- Сама кнопка которая должна держатся -->
<div class="middle_all2_mobi_box_content">
<?php print render($page['content']); ?>
</div>
</div>
<?php include('footer.tpl.php'); ?>
ВОТ САМ CSS
/*Начало контента сайта*/
.middle_all2_mobi{
min-height:100%;
max-width:100%;
background:url('../images/top2.png');
margin:0px;
padding-top:0px;
position:relative;
}
.middle_all2_mobi_table{
width:1003px;
height:540px;
position:absolute;
left:50%;
margin-left:-502px;
}
.middle_all2_mobi_table_planet{
width:455px;
height:300px;
background:url('../images/top_sait_planet.png');
background-repeat:no-repeat;
background-position:top left;
}
.middle_all2_mobi_table_scratches{
width:508px;
height:540px;
background:url('../images/content_all2_mobi_scratches.png');
background-repeat:no-repeat;
background-position:top left;
margin-left:-100px;
}
.middle_all2_mobi_box_content{
background-color:#aaa;
padding-top:0px;
margin: 100px 0px 0px 104px;
}
.middle_button_top_menu{
display:inline;
margin-top:auto;
width:100px;
height:100px;
background:url('../images/button_foot.png');
background-repeat:no-repeat;
background-position:0px 0px;
position:static;
float:left;
transition-property:top;
-webkit-transition-property:top;
-moz-transition-property:top;
-o-transition-property:top;
-ms-transition-property:top;
transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-ms-transition-duration: 0.6s; /* IE9+ */
}
.middle_button_top_menu:hover{
background:url('../images/button_foot.png');
background-position:0px -101px;
}
.top-visible .middle_button_top_menu {
display:block!important;
margin-top:40px!important;
position:fixed!important;
}
.top-visible-fix{
display:inline;
vertical-align:bottom;
}
.top-visible-fix .middle_button_top_menu{
margin-top:auto;
position:absolute;
bottom:20px;
transition-property:none;
-webkit-transition-property:none;
-moz-transition-property:none;
-o-transition-property:none;
-ms-transition-property:none;
}
.top-visible-fix .middle_button_top_menu{
margin-top:auto;
position:absolute;
bottom:20px;
transition-property:none;
-webkit-transition-property:none;
-moz-transition-property:none;
-o-transition-property:none;
-ms-transition-property:none;
}
