Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.10.2011, 04:00
Новичок на форуме
Отправить личное сообщение для wexon Посмотреть профиль Найти все сообщения от wexon
 
Регистрация: 27.10.2011
Сообщений: 2

Всплывающий и исчезающий toolbox
var _top = $(window).scrollTop();
$(window).scroll(function() {
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
$('div#toolbox').slideDown('slow');
}
else
{
$('div#toolbox').slideUp('slow');
}
_top = _cur_top;
});
$('div#toolbox').keypress(function() {
$('div#toolbox').slideUp('slow');
});


<style> 
        div#toolbox	{
        	background:#eee bottom left repeat-x;height:30px;
        	position:fixed;
        	bottom:0px;
        	left:0px;
        	width:100%;
        	border-top:10px solid #e5e5e5;	}
        
        ul.toolbox		{
        	margin:0px;
        	padding:0px;
        	list-style:none;		}
        
        ul.toolbox li	{
        	background:#666 bottom left repeat-x;
        	padding:0px 10px 0px 10px;
        	float:left;
        	color:#ffffff;
        	height:30px;
        	line-height:30px;		}
        
        ul.toolbox li	{
        	color:#ffffff;
        	display:block;
        	padding:0px 5px 0px 5px;
        	text-decoration:none;		}
        
        div.fixedpage	{
        	width:925px;
        	text-align:left;		}              
</style>
<div id="toolbox" style="display:none"> 
        	<div align="center"> 
        		<div class="fixedpage"> 
        			<div style="position:relative"> 
        				<ul class="toolbox"><li>Long text...Long text...Long text...</li></ul>
        			 </div> 
        		</div> 
        	</div> 
        </div>


Смысл таков, при прокрутки страницы вниз, внизу окна всплывает окно/меню, но мне надо что бы окно всплывало только после прокрутки определёённой высоты, скажем 200px. и только в этом случае появлялся toolbar внизу страницы. Грубо говоря, наверху страницы есть меню, как только оно прокручивается и исчезает с поля зрения, в низу страницы появляется toolbar(в моём случае уменьшенное меню). В варианте код которого я выложил toolbox сразу пропадает после любой прокрутки ввех(а надо чтобы только если нету верхнего меню в видимости). Я пробовал это сделать через id элемента, якобы я прокрутил до id="showtoolbox" и оно всплыло, но тут проблема с тем, что у многих высото окна браузера разная и момент исчезновения будет разный в зависимости от высоты окна.
С JQuevery работаю первый раз, так что извеняйте если я слепой
Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 27.10.2011, 13:41
Новичок на форуме
Отправить личное сообщение для wexon Посмотреть профиль Найти все сообщения от wexon
 
Регистрация: 27.10.2011
Сообщений: 2

Всё уже разобрался и нашёл отличный мне вариант
$(document).ready(function(){
	$("#toolbox").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
				$('#toolbox').fadeIn();
			} else {
				$('#toolbox').fadeOut();
			}
		});
	});
});
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2013, 20:04
Новичок на форуме
Отправить личное сообщение для barkov Посмотреть профиль Найти все сообщения от barkov
 
Регистрация: 19.04.2012
Сообщений: 4

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающий блок. Beriagts jQuery 4 03.08.2013 03:58
ActiveX и всплывающий календарь beralex jQuery 2 20.07.2011 21:03
Заркывать всплывающий див tazododu jQuery 8 18.03.2011 13:17
Всплывающий див около курсора Andrejs Элементы интерфейса 1 11.02.2011 17:08
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23