Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Фиксация блока (position: fixed)
Фиксация блока
rast-codeine
Сообщений: 32
Репутация: 2
Уровень замечаний:

Сообщение # 1 | 19:22:55
Друзья подскажите как сделать что бы рекламный блок перемещался вместе с прокруткой страницы...
Блок справа. http://vipsamogon.ucoz.ru/

css
#fixedBox {
z-index: 95;
height: 400px;
width: 240px;
position: fixed;
margin-left: 8px;
}

<div id="fixedBox">РЕКЛАМА.......</div>
как только ставлю див, рекламный блок попадает совсем(((
Подскажите как сделать?
Заранее спасибо!

Белый каталог статей: Barnoba.ru
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 2 | 19:43:36
Эта строчка заставляет блок оставаться на месте при прокрутке странички
position: fixed;


А где собственно этот самый блок<?
Справа не нахожу его..


WWW.DOGICA.COM / WWW.DOGICA.ORG
rast-codeine
Сообщений: 32
Репутация: 2
Уровень замечаний:

Сообщение # 3 | 09:36:27
Dogica, справа, под блоком статистика!

Белый каталог статей: Barnoba.ru
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 4 | 15:01:37
<script type="text/javascript">var begun_auto_pad = 340122536;
var begun_block_id = 340122848;
</script>
<script src="http://autocontext.begun.ru/autocontext2.js" type="text/javascript"></script>
<!--/U1CLEFTER1Z-->
</div>

1) закрывающий DIV поставьте ПЕРЕД <script>

2) пропишите CSS

#fixedBox {
z-index: 95;
height: 400px;
width: 240px;
position: fixed;
margin-left: 8px;
}

3) установите вашу рекламу в <div id="fixedBox"></div>
<div id="fixedBox">
<script type="text/javascript">var begun_auto_pad = 340122536;
var begun_block_id = 340122848;
</script>
<script src="http://autocontext.begun.ru/autocontext2.js" type="text/javascript"></script>
</div>


WWW.DOGICA.COM / WWW.DOGICA.ORG
rast-codeine
Сообщений: 32
Репутация: 2
Уровень замечаний:

Сообщение # 5 | 22:57:56
Dogica,
<div id="fixedBox">
<script type="text/javascript">var begun_auto_pad = 340122536;
var begun_block_id = 340122848;
</script>
<script src="http://autocontext.begun.ru/autocontext2.js" type="text/javascript"></script>
</div>
Если так делать рекламный блок вообще пропадает(

Белый каталог статей: Barnoba.ru
killbit
Сообщений: 317
Репутация: 104

Сообщение # 6 | 23:29:39
вы хотите что бы он в одном месте постоянно был ?

Добавлено (22 Июн 2015, 23:29:39)
---------------------------------------------
Попробуйте добавить позицию. например top:100px
Сообщение отредактировал killbit - Понедельник, 22 Июн 2015, 23:42:05
rast-codeine
Сообщений: 32
Репутация: 2
Уровень замечаний:

Сообщение # 7 | 10:12:11
killbit, блин, так он поверх меню встает.
Я хочу сделать так:
Прокручивая страницу и доходя до рекламного блока, он фиксировался при дальнейшем спуске.
А При подъеме вверх, чтобы доходил до отведенного ему места и оставался под блоками меню и стат.

Как же, как это сделать?

Вот, кстати пример: http://infotables.ru/
Блок слева.

Белый каталог статей: Barnoba.ru
†Angel†
Сообщений: 369
Репутация: 126
Уровень замечаний:

Сообщение # 8 | 12:58:27

Adguard - Рекламы не будет!
rast-codeine
Сообщений: 32
Репутация: 2
Уровень замечаний:

Сообщение # 9 | 14:03:46
Спасибо. Но разобраться не смог (((

Белый каталог статей: Barnoba.ru
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 10 | 14:23:26
вот пример ---- http://www.websoldier.ru/examples/float-sidebar-block.html

вот код:


Код
<!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>
<script type="text/javascript" src="jquery-1.9.1.min.js - ЗАМЕНИТЕ НА СВОЙ ПУТЬ К БИБЛИОТЕКЕ JQUERY !!!!!!!!!"></script>
<style type="text/css">#float-sidebar{border:1px solid #000; width:300px;float:right; background:#de5; }</style>

<script language="javascript">
$(document).ready(function(){var floatsidebar = $("#float-sidebar");var offset = floatsidebar.offset();var left = offset.left;var top = offset.top;var width = $("#float-sidebar").width();var height = $("#float-sidebar").height();$(window).scroll(function(){var scrollTop = $(window).scrollTop();if (scrollTop >= top) {$('#float-sidebar').css({   left:left+'px',   position:'fixed',   top:"0px",   width:width+"px"   };);} else {$('#float-sidebar').css({   position:'static',   };);}};);};);
</script>
</head>

<body>

<div>
<div id="float-sidebar"> текст плавающего блока<ul>
<li>первый элемент списка</li>
<li>второй элемент списка</li>
<li>третий элемент списка</li>
<li>четвертый элемент списка</li>
<li>пятый элемент списка</li>
<li>шестой элемент списка</li>
</ul>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat    
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation    
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse    
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero    
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum    
zzril delenit augue duis dolore te feugait facilisi.<br><br><br>

</div>
</body>
</html>


источник ---- http://www.websoldier.ru/plavayu....ov.html


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 14:24:51
†Angel†
Сообщений: 369
Репутация: 126
Уровень замечаний:

Сообщение # 11 | 14:24:58
rast-codeine, Оберните ваш блок с рекламой так

Код
<div id="plavreklama">   
ваш блок
</div>


В нижнюю часть сайта вставьте это
Код
<script type="text/javascript" src="/js/jquery-contained-sticky-scroll.js"></script>   
<script type="text/javascript">   
jQuery(document).ready(function(){
jQuery('#plavreklama').containedStickyScroll();
};);

</script>


Файл jquery-contained-sticky-scroll.js залейте себе на сайт в папку js
скачать

Adguard - Рекламы не будет!
Сообщение отредактировал †Angel† - Вторник, 23 Июн 2015, 14:39:38
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Фиксация блока (position: fixed)
Страница 1 из 11
Поиск: