Чат сообщества
|
   |
| Модератор форума: Yuri_G |
| Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Фиксация блока (position: fixed) |
| Фиксация блока |
|
Друзья подскажите как сделать что бы рекламный блок перемещался вместе с прокруткой страницы...
Блок справа. http://vipsamogon.ucoz.ru/ css #fixedBox { z-index: 95; height: 400px; width: 240px; position: fixed; margin-left: 8px; } <div id="fixedBox">РЕКЛАМА.......</div> как только ставлю див, рекламный блок попадает совсем((( Подскажите как сделать? Заранее спасибо! Белый каталог статей: Barnoba.ru
|
|
|
|
<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 |
|
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
|
|
вы хотите что бы он в одном месте постоянно был ?
Добавлено (22 Июн 2015, 23:29:39) --------------------------------------------- Попробуйте добавить позицию. например top:100px Сообщение отредактировал killbit - Понедельник, 22 Июн 2015, 23:42:05
|
|
killbit, блин, так он поверх меню встает.
Я хочу сделать так: Прокручивая страницу и доходя до рекламного блока, он фиксировался при дальнейшем спуске. А При подъеме вверх, чтобы доходил до отведенного ему места и оставался под блоками меню и стат. Как же, как это сделать? Вот, кстати пример: http://infotables.ru/ Блок слева. Белый каталог статей: Barnoba.ru
|
|
|
|
|
|
вот пример ---- 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
|
|
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
|
| |||
| |||