Фиксированное содержание с рекламой в сайтбаре
Нужна реализация фиксированного содержания как на этом сайте в сайтбаре.
Должно фиксироваться содержание и реклама после просмотра всех предыдущих блоков. При этом все это дело не должно заезжать на футер.
Дополнительно интересует возможность выделения пункта содержание жирным.
Например есть такое содержание:
-
Заголовок 1
-
Заголовок 2
-
Заголовок 3
- Заголовок 4
Было бы удобно для пользователей, если бы читая информацию он выдел выделенный пункт в содержании, к которому относиться эта информация. Например когда заголовк 2 равняеться по середине экрана, в содержании он выделяется жирным и т.д.
Оглавление выводится как обычно, реклама в СБ тоже. Все остальное делает специально написанный скрипт. У меня на сайте это комбинация плавающего блока и оглавления...
Вот код который я писал для этого. В целом там все готово, вам возможно селекторы нужно будет поменять. В общем, вам нужно будет немного разобраться.
jQuery(document).ready(function($){ // ОГЛАВЛЕНИЕ в сайдбаре ---------- +function(){ var $contents = $('.contents'), $sidebar = $('.sidebar'), top_padd = 50; // если оба блока найдены if( ! $contents.length || ! $sidebar.length ) return; var $sbLastChildren = $sidebar.find('> :not(style):not(script):last'), $window = $(window), wHeight = $window.height(), $contentsBlock = $( '<div id="sb__contents_wrap" style="top:'+ top_padd +'px;">\ <style>\ .sb_contents{ padding:.7em 1em; line-height: 1.2; }\ .sb_contents a{ color:#ccc; }\ .sb_contents a:hover{ color:#eee; text-decoration:none; }\ .sb_contents li{ margin-bottom:.5em; }\ .sb_contents li.sub{ margin-left:2em !important; }\ .sb_contents li.sub_2{ margin-left:4em !important; }\ .sb_contents li.sub_3{ margin-left:6em !important; }\ </style>\ <ul class="sb_block sb_contents">'+ $contents.html() +'</ul>\ </div>' ); $sidebar.append( $contentsBlock ); $contentsBlock .width( $sbLastChildren.outerWidth() ) .css({ "max-height": (wHeight-top_padd)+'px', overflow: 'auto' }); // добавляем рекламный блок если есть место... // ждем, чтобы блок подгрузился... setTimeout(function(){ var $sb_ads = $('.yandex_ads_sb').first(), sds_height = $sb_ads.height(), cnt_height = $contentsBlock.height(), win_height = $window.height() - top_padd; // 70 отступ сверху if( (sds_height + cnt_height) > win_height ) return; $contentsBlock.append( $sb_ads.data('added_to_contents', true) ); }, 4000); }(); // плавающий рекламный блок в сайдбаре +function(){ var $fixable = $('.sidebar > :not(style):not(script):last'), $window = $(window), $footer = $('.footer'); if( ! $fixable.length ) return; // нет сайдбара if( $window.width() < 800 ) return; // выходим если мобильная версия function detect_relative_parent($that){ var $parent = $that.parent(); $parent_relative_element = $parent; if( ! $parent.length ) return; // для рекурсии if( $parent.css('position') === 'relative' ) return; detect_relative_parent( $parent ); // рекурсия } var topY, botY, fixable_width, $parent_relative_element, fn__SetVars = function(){ var $flex_prev = $fixable.prevAll(':not(style):not(script):first'); topY = $flex_prev.offset().top + $flex_prev.outerHeight(); botY = $footer.offset().top - $fixable.outerHeight(); fixable_width = $fixable.width(); // определим родительский элемент со свойством position:relative detect_relative_parent( $fixable ); }; // надо проверить если при установки fixed изменяться высота документа то ничего не делаем вообще... // поправим позиции fn__SetVars(); // установим переменные setInterval( fn__SetVars, 3000 ); // правим переменные каждые 3 сек. $window.scroll(function(){ var scrollTop = $window.scrollTop(), pos = $fixable.css('position'); if( scrollTop > topY && scrollTop < botY ){ if( pos !== 'fixed' ) $fixable.css({ position:'fixed', top:'4em', width:fixable_width, display:'block' }); } else if( scrollTop >= botY ){ if( pos !== 'absolute' ) $fixable.css({ position:'absolute', top:(botY - $parent_relative_element.offset().top) +'px', width:fixable_width }); } else{ if( pos !== 'static' ) $fixable.css({ position:'static', top:'auto', width:'auto' }).data('pos',false); } }); }(); });Все работает, но возникает ошибка на блоке, где фиксация должна прерываться.
В этом коде:
else if( scrollTop >= botY ){ if( pos !== 'absolute' ) $fixable.css({ position:'absolute', top:(botY - $parent_relative_element.offset().top) +'px', width:fixable_width }); }Ругается на этот участок
Текст ошибки: Uncaught TypeError: Cannot read property 'top' of undefined
Род. элемент где находится плав. блок должен иметь css свойство
position:relative- а то при абсолюте улетит он куда нить...Спасибо. Видел что проблема в этом свойстве, но куда его писать не понял
Тимур, а где вы вставляете код с рекламой, у меня она получается грузится сначала перед оглавлением, а потом уже меняется расположение. Как сделать так чтоб она сразу грузилась после содержания?
По содержанию есть материал
http://wp-kama.ru/id_1513/kama_contents.html
Первая часть:
http://leafo.net/sticky-kit/
или другой стикет.
По второй части на выбор:
http://www.jqueryscript.net/menu/One-Page-Scroll-Navigation-Plugin-with-jQuery-pageNav.html
http://www.jqueryscript.net/layout/jQuery-Plugin-For-One-Page-Navigation-Plugin-Page-Scroll-To-ID.html
или аналоги.
Спасибо! По второй части, второй плагин позволяет решить эту задачу, первый не подходит или я не разобрался как это сделать.