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

Плавающие блоки jQuery

Sanu0074
На сайте с 31.08.2012
Offline
110
Sanu0074
832

Сделал страницу с плавающими блоками (слайдерами), при прокрутке они дергаются очень, ошибку я нашел, но не пойму как исправить, сложность из-за того что там два таких блока и три точки измерения высоты.

Ссылка на страницу - тыц

Ссылка на скрипт в котором косяк - тыц

функция sliderFx().

Так же оцените на сколько не грамотно написан скрипт, и что бы стоило переделать?

S
На сайте с 13.10.2014
Offline
171
silicoid
#1

я думал, что Вам кто-нибудь ответит, однако-же тишина.

Мне кааца вы перемудрили с кодом, там все укладывается строчек в 5-6. если уж наворачивать, то в 10 )

Я вчера написал демку, но постить не стал. Сегодня после 22 мск, как приеду с работы, выложу.

ODP+Yahoo=??? Открыть попап-окно и вернуть Ищется контент-менеджер (тематика плавание)
Sanu0074
На сайте с 31.08.2012
Offline
110
Sanu0074
#2

silicoid, спасибо) а насчет того что перемудрил - да, согласен, жесть получилась)

S
На сайте с 13.10.2014
Offline
171
silicoid
#3

Как и обещал - код. Он немного заморочен, но зато работает даже на фиксированных страницах 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>



<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

	$(document).ready(function(){

		

		/*

		проблема в том, что блок должен привязываться к колонке, а если колонка фиксированной ширины, то придется рассчитывать отступы

		код ниэе это и делает 

		*/

		

		var lps = $('#fc').offset().left;   /* store left offset */

		var lpp = $('#fc').position().left; /* store left postition */

		$('#fc').html(lps)

		

		/* подгонка при изменении размера окна */

		$(window).resize(function(){

			lps = $('#fc').parent().offset().left + lpp; /* store left offset */	

			if ($('#fc').hasClass('fixIt')){

				$('#fc').css('left',lps);

			}

		});

		

		/* собственно кусок кода фиксации */

		$(window).scroll(function(){

			var fp = 100;

			var STop = $(window).scrollTop();		

			$('#fc').html(STop);

			

			if (STop > fp){

				$('#fc').css('left',lps);

				$('#fc').addClass('fixIt');				

			} else {

				$('#fc').removeClass('fixIt');

				$('#fc').css('left',lpp);

			}

		})

	})

</script>

<link href="styles.css" rel="stylesheet" type="text/css">

</head>



<body>

	<div id="container">

        <div id="leftBlock">left block</div>

        <div id="rightBlock">

        		<div id="fc"> Float container in right block </div>

        </div>

    </div>

</body>

</html>

и css - styles.css 


@charset "utf-8";

body{

	margin:0px;

	padding:0px;

}



#container{

	display:block;

	position:relative;

	letter-spacing:-0.3em;

	width:100%;

}

#leftBlock {

	display:inline-block;

	width:700px;

	text-align:left;

	vertical-align:top;

	letter-spacing:normal;

	height:2500px;

	background-color:#FFCC00;

}

#rightBlock {

	display:inline-block;

	text-align:left;

	vertical-align:top;

	width:300px;

	height:2500px;

	background-color:#009900;

	letter-spacing:normal;

	position:relative;

}



#fc{

	display:block;

	position:absolute;

	left:50px;

	top:200px;

	width:200px;

	height:200px;

	background-color:#FF9900;

}

#fc.fixIt{

	position:fixed;

	top:100px;

}
Sanu0074
На сайте с 31.08.2012
Offline
110
Sanu0074
#4

silicoid, спасибо) я вот пока пытаюсь победить свое замороченное решение) вот с прокруткой вниз сейчас гладко, теперь надо наоборот сделать...

---------- Добавлено 04.04.2015 в 00:52 ----------

silicoid, сейчас работает, вроде без лагов, но не знаю на сколько криво все сделано(

Javascript : почему не На каком движке лучше Поменять местами столбцы в
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#5

Попробуйте этот плагин: http://leafo.net/sticky-kit/

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
Sanu0074
На сайте с 31.08.2012
Offline
110
Sanu0074
#6

vlad00777, пробовал именно этот и подобные, они немного не так работают, чтоб настроить правильно приходится те же заморочки лепить.

Я вот сейчас все сделал, работает, только бы оптимизировать по человечески эту функцию:

    sliderFx: function(wnd){

        var slH = $('.sl').height()+28;

        var firstSl = $('.frst');

        var secondSl = $('.scnd');

        

        var firstSlPos = wnd.scrollTop()-firstSl.offset().top+85;

        if(firstSlPos>0){

            firstSl.css({position:'fixed',top:'85px',right:0});

        }else if(firstSl.offset().top-slH<0){

            firstSl.css({position:'relative',top:'auto',right:'auto'});

        }

        

        var secondSlPos = wnd.scrollTop()-secondSl.offset().top+85;

        if(secondSlPos+slH+120>0){

            firstSl.css({position:'fixed',top:(secondSlPos+slH+35)*-1,right:0});

            if(secondSlPos>0){

                secondSl.css({position:'fixed',top:'85px',right:0});

            }else if(secondSl.offset().top-$('.sec').first().height()-slH<=0){

                secondSl.css({position:'relative',top:'auto',right:'auto'});

            }

        }

        

        var csl = $('.chose-h');

        var cslPos = wnd.scrollTop()-csl.offset().top+85;

        if(cslPos+slH>=0){

            secondSl.css({position:'fixed',top:(cslPos+slH-85)*-1,right:0});

        }

    },
wp_mail из стороннего файла Cкрипт каталога Scripto | Ищу хостинг для форума

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