Форум Сайтостроение Веб-строительство

Помогите со скролом плз

sergey885
На сайте с 19.08.2002
Offline
248
sergey885
831

Есть код (см. ниже).

Когда начинаю скролить, то блок "блок который скролится" начинает скролится сразу. А как бы сделать так, чтобы скролинг этого блока начинался только тогда, когда отступ сверху стал бы равен например 10пикселям? 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML 

xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>

<META content="text/html; charset=utf-8" http-equiv="content-type">

<STYLE type="text/css">

/* <![CDATA[ */



* {padding: 0; margin: 0}

body {

	padding: 10px;

	margin: 0;

	font: 13px/18px "Trebuchet MS", Arial, Tahoma, sans-serif;

}

h1 {

	font-size: 19px;

	color: #444;

	padding: 8px 0;

}

p {

	padding: 8px 0;

}



#wrapper {

	width: 642px;

	margin: 0 auto;

	padding-right: 243px;

	

	border: 1px dashed #F00;

}

#container {

	position: relative;

	z-index: 10;



	border: 1px solid #AAA;

	background: #F7F7F7;

	padding: 10px 15px 5px;

	margin: 1px 0 1px 1px;

}



#fixed {

	position: fixed;

	top: 108px;

	left: 0;

	width: 100%;

}

.fixed {

	position: relative;

	width: 240px;

	margin: 0 auto;

	top: 12px;

	left: 323px;



	border: 1px solid #0C0;

	background: #EAFFEA;

}

.fixed p {

	padding: 100px 12px 12px;

	margin: 0;

	text-align: center;

}



/* ]]> */

</STYLE>

<!--[if lt IE 7]>

<style type="text/css">

#fixed {

	position: absolute;

	top: expression(parseInt(document.documentElement.scrollTop, 0) + "px");

	left: 50%;

	margin-left: -321px;

}

</style>

<![endif]-->

<META name="GENERATOR" content="MSHTML 9.00.8112.16430"></HEAD>

<BODY>

<br><br><br><br><br><br>

<DIV id="wrapper">

<DIV id="container">

<P>здесь куча текста, чтобы скрол в браузере появился</P></DIV><!-- #container -->

<DIV id="fixed">

<DIV class="fixed">

<P>блок который скролится</P></DIV></DIV></DIV><!-- #wrapper --></BODY></HTML>
интернет-маркетинг. стратегии развития веб-проектов.
H
На сайте с 13.06.2011
Offline
9
Haubergeon
#1

Посмотрите вот это. А тут рабочий пример к нему

А вот еще одна интересная штука, это уже плагин jQuery:

Описание на русском

Пример

Слово не воробей. Все не воробей, кроме воробья!
sergey885
На сайте с 19.08.2002
Offline
248
sergey885
#2
Haubergeon:
Посмотрите вот это. А тут рабочий пример к нему

А вот еще одна интересная штука, это уже плагин jQuery:
Описание на русском
Пример

спасибо за примеры. очень похоже на то, что надо, но немного все таки не то: у них как-бы задержка в скольжении. Впрочем, если поковыряться в коде...

H
На сайте с 13.06.2011
Offline
9
Haubergeon
#3

В первом примере есть кусок js кода в html

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

Есть 2 выхода:

1) метод animate({marginTop...}) изменить на css({marginTop...}) убрав при этом ненужный stop()

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed")сss({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").css({marginTop: 0});};});
	});
</script>

2) в animate добавить еще один параметр, так получится универсальнее, мало ли пригодится анимацию все же добавить)

0 - это скорость анимации

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding}, 0);
			}
			else {$("#fixed").stop().animate({marginTop: 0}, 0);};});
	});
</script>
sergey885
На сайте с 19.08.2002
Offline
248
sergey885
#4

Haubergeon, спасибо большое, второй код в самый раз.

Правда див дергается немного, но это уже мелочи.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий