Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Моя группа в контакте:



Как сделать так чтобы контейнер <div> двигался с экраном браузера только в рамках другого контейнера

Для этого нам понадобится три файла: (index.html; css_fail.css; biblioteca.js)

В файл index.html вставляем секцию, в которой и будет двигаться наш контейнер:

<html>
<head>
<link href="css_fail.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="biblioteca.js"></script>
</head>
<body>

<div style="position:relative; top:200px; left:0px; height:1500px; width:1000px; border:1px solid blue;">

<section>
<div id="work-post-1" class="work-post">
					
<div class="work-content">			
<img src="coloboc.png" style='margin:10px 0px;' height="170" width="210" border="0">
</div>
					
<script type="text/javascript">
jQuery(document).ready(function($) {
offset_left = $('#work-post-1 .work-content').offset().left + 0;
$(window).bind('resize', function() { 
offset_left = $('#work-post-1 .work-content').offset().left + 0;
});

$(window).scroll(function(event) {
var y = $(this).scrollTop();

var workheight_ = $('#work-post-1').height();
var worktop_221 = $('#work-post-1').offset().top;
var contentheight_ = $('#work-post-1 .work-content').height();
var contenttop_221 = $('#work-post-1 .work-content').offset().top;
if((contentheight_ + 10) < workheight_) {
if(contenttop_221 - y < 9 && (workheight_ + worktop_221) - (contentheight_ + y) >= 25) {
$('#work-post-1 .work-content').addClass('fixed');
$('#work-post-1 .work-content').css({'left': offset_left + 'px'});
} else if((workheight_ + worktop_221) - (contentheight_ + y) < 25) {
$('#work-post-1 .work-content').removeClass('fixed');
$('#work-post-1 .work-content').addClass('absolute');
}	else if($('#work-post-1 .work-content').hasClass('fixed') && (contenttop_221 - worktop_221) < 25) {
$('#work-post-1 .work-content').removeClass('fixed');
}
else if($('#work-post-1 .work-content').hasClass('absolute')) {
$('#work-post-1.work-content').removeClass('absolute');
$('#work-post-1 .work-content').css({'left': offset_left + 'px'});
$('#work-post-1 .work-content').addClass('fixed');
}
}
});
});
</script>
</div>		  
</section>	
</div>
</body>
</html>
посмотреть

В файле css_fail.css мы зададим размеры нашим блокам и позиционирование на экране:

.work-post {
	width: 220px;
	height: 900px;
	border:1px solid green;
	position: relative;
	left: 10px;
}
.work-content.fixed {
	position: fixed;
	width: 210px;
	height: 180px;
	top: 10px;
	border:1px solid gold;
}
.work-content.absolute {
	position: absolute;
	width: 210px;
	height: 180px;
	bottom: 0px;
	left: 0px !important;
	border:1px solid red;
}

В файл biblioteca.js необходимо записать библиотеку jquery, которую вы можете скачать у нас или с официального сайта.

И так можете посмотреть, что у нас получилось: Взглянуть!

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь