WordPress как на ладони

Фиксированное содержание с рекламой в сайтбаре

Нужна реализация фиксированного содержания как на этом сайте в сайтбаре.

Должно фиксироваться содержание и реклама после просмотра всех предыдущих блоков. При этом все это дело не должно заезжать на футер.

Дополнительно интересует возможность выделения пункта содержание жирным.
Например есть такое содержание:

  • Заголовок 1

  • Заголовок 2

  • Заголовок 3

  • Заголовок 4

Было бы удобно для пользователей, если бы читая информацию он выдел выделенный пункт в содержании, к которому относиться эта информация. Например когда заголовк 2 равняеться по середине экрана, в содержании он выделяется жирным и т.д.

0
stahov
7.5 лет назад
  • 0
    Kama9616

    Оглавление выводится как обычно, реклама в СБ тоже. Все остальное делает специально написанный скрипт. У меня на сайте это комбинация плавающего блока и оглавления...

    Вот код который я писал для этого. В целом там все готово, вам возможно селекторы нужно будет поменять. В общем, вам нужно будет немного разобраться.

    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);
    			}
    		});
    	}();
    
    });
    stahov 7.5 лет назад

    Все работает, но возникает ошибка на блоке, где фиксация должна прерываться.
    В этом коде:

    else if( scrollTop >= botY ){
    				if( pos !== 'absolute' )
    					$fixable.css({ position:'absolute', top:(botY - $parent_relative_element.offset().top) +'px', width:fixable_width });
    			}

    Ругается на этот участок

    .top) +'px', width:fixable_width });

    Текст ошибки: Uncaught TypeError: Cannot read property 'top' of undefined

    Kama 7.5 лет назад

    Род. элемент где находится плав. блок должен иметь css свойство position:relative - а то при абсолюте улетит он куда нить...

    stahov 7.5 лет назад

    Спасибо. Видел что проблема в этом свойстве, но куда его писать не понял

    stahov 7.5 лет назад

    Тимур, а где вы вставляете код с рекламой, у меня она получается грузится сначала перед оглавлением, а потом уже меняется расположение. Как сделать так чтоб она сразу грузилась после содержания?

    Комментировать
  • 0
    PHouse6 poweredhouse.ru

    По содержанию есть материал
    http://wp-kama.ru/id_1513/kama_contents.html

    Комментировать
  • 0
    stepan2278 www.weblancer.net/users/stepanko/?affili...

    Первая часть:

    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

    или аналоги.

    stahov 7.5 лет назад

    Спасибо! По второй части, второй плагин позволяет решить эту задачу, первый не подходит или я не разобрался как это сделать.

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация