Фиксированная позиция
Всем привет!
Помогите пожалуйста решить задачку На сайте http://all2.mobi имеется слева вверху кнопка которая открывает меню(черный фон). Проблема состоит в том что кнопку необходимо фиксировать только в 1-ом див классе у которого белый фон. Не могу понять как может кто-то даст пример решения? Т.к. позиция щас фиксированая у кнопки при помощи ксс, кнопка пропадает при появлении меню =( думаю сами поймете |
Можно получить высоту верхнего меню
var menu_height = $('.top_all2_mobi').height();
и добавить к кнопке отступ сверху
var topSpacing = 40 + parseInt(menu_height);
$('.top_all2_mobi').css('top', topSpacing + 'px');
Где 40 - отступ сверху по-умолчанию. |
Чет у меня не получилось вот добавил к той кнопке которая опускает меню.
$(document).ready(function () {
var menu_height = $('.top_all2_mobi').height();
var topSpacing = 40 + parseInt(menu_height);
$('.top_all2_mobi').css('top', topSpacing + 'px');
$('a.middle_button_top_menu').click(function () {
$('.box_top_all2_mobi').slideDown('slow');
return false;
});
$('a.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 () {
$('.top_all2_mobi').css('top', topSpacing + 'px');
$('a.middle_button_top_menu').click(function () {
*!*
$('.box_top_all2_mobi').slideDown('slow', function() {
var menu_height = $('.top_all2_mobi').height(); // после слайддауна считать
var topSpacing = 40 + parseInt(menu_height);
});
*/!*
return false;
});
$('a.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 () {
$('.top_all2_mobi').css('top', topSpacing + 'px');
$('a.middle_button_top_menu').click(function () {
$('.box_top_all2_mobi').slideDown('slow', function() {
var menu_height = $('.top_all2_mobi').height(); // после слайддауна считать
var topSpacing = 40 + parseInt(menu_height);
});
return false;
});
$('a.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;
});
});
|
Цитата:
|
Цитата:
|
http://www.all2.mobi/
Смотри когда нажимаешь на кнопку вниз слева вверху тогда падает менюшка но мне нужно что-бы когда я перехожу на белый фон тоесть прокручиваю мне должна опять появлятся эта кнопка только на белом фоне и быть фиксированной при прокрутке беголого фона |
смотри открой сайт http://www.all2.mobi/ покрути страницу вверх вниз, у кнопки вверху слева которая на белом фоне позиция фиксированная но когда нажимаешь на кнопку у тебя выпадет меню черное и кнопка пропадает так как падает в top0
|
Цитата:
|
Так она так и делает вроде. При прокручивание страницы со статьями - она на одном месте. При нажатии уходит вниз.
|
мне нужно что-бы я видел кнопку
Вот мне нужно такое как нижний блок только у меня чет нихрена не получается http://ruseller.com/lessons/les999/code.html |
А ты её не видишь? Да она есть! И зафискирована на однои месте именно в div.midlle_all2_mobi, т.е. когда у тебя нажимают на кнопку эту - весь блок div.midlle_all2_mobi уходит вниз вместе с кнопкой.
|
Мне уже даже интересно стало, что именно тебя не устраивает. Всё красиво, всё работает.
|
когда на эту кнопку нажимаешь у неё позиция становится bottom:0 а не top:0 для div класса midlle_all2_mobi. И при bottom:0 кнопку не видно
|
Ну если ты такое умудряешся сделать:
.box_fast_menu {
width: 100%;
margin: 0px;
padding: 0px;
height: 35px;
z-index: 1; <<<<
left: 0;
position: fixed;
z-index: 9999999; <<<<
}
То я не знаю, что тебе ответить... Там нет ни у одного элемента свойств ни bottom, ни top вообще.. Может ты не ту ссылку кинул |
BoJlod9I,
Тут есть подобное = пост 11 http://javascript.ru/forum/misc/2892...tml#post181794 |
Щас работает все нормально кроме того что после выезджания менюшки, по кнопке которая привязана к блоку, позиция вновь становится не фиксированнной =(
Пример http://all2.mobi Вот JS которые использую для этой кнопки JS который привязывает к блоку кнопку
<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);
}
});
</script>
А вот JS который показывает меню через кнопку
$(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;
});
});
|
BoJlod9I,
Добавьте (Хотя про fixed - Вы вродь уже догадались
<style type="text/css" media="all">
.top-visible .middle_button_top_menu {
display:block!important;
margin-top:40px!important;
position: fixed!important;
}
</style>
|
Кнопка должна ездить даже после того как выехала меню
А она не ездит даже так
<style type="text/css" media="all">
.top-visible .middle_button_top_menu {
display:block!important;
margin-top:40px!important;
position: fixed!important;
}
</style>
Если честно не могу понять в чем причина =( |
BoJlod9I,
Дык это дополнение было к установленому Вами в посте 19 - А не просто так к исходнику |
У меня вообще всё поплыло к херам. Чтобы ездила независимо от состояния меню(открыто/закрыто) - вынеси кнопку в начало своего кода, чтобы он не был чилдреном никакого дива.
|
так я и заменил просто
|
она всеравно не пашет =(
|
после того как меню выехала кнопка не крутится =(
|
BoJlod9I,
1. Выньте и разверните скрипт и css (Для данной задачи) - на странице - тады править будет удобнее = лазить каждый раз в дебагер - не АЙС! //Зы: - Не стучите в личку - я смотрю новые сообщения! |
ВОТ ВЕРСТКА
<?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;
}
|
Deff можешь написать мне в асю?
|
нифига не понял покажи пожалуйста готовый JS
|
BoJlod9I,
Дафай завтра - чот уже не соображаю (походу ерунду сказал) Но функция после клика не запускается |
Так может мне 2 функции нужно объеденить?
|
BoJlod9I,
Вот эти две библиотеки имхо лишние <script type="text/javascript" src="http://www.all2.mobi/misc/jquery.js?v=1.4.4"></script> <script type="text/javascript" src="http://www.all2.mobi/misc/jquery.once.js?v=1.2"></script> Возможно и еще есть дублирование |
| Часовой пояс GMT +3, время: 04:11. |