Question

Ребята привет. Помогите настроить (если можно) такое. Слева есть контейнер с блоками, так вот он прогручивается вместе со страницей до конца, даже если он пустой. А можно сделать так, чтобы он прогручивался до последнего своего активного блока и останавливался, а страница прокручивалась бы дальше.

Answer 1

Оборачиваем последний блок так 

<div id="fixed">ваш блок</div>

Ниже ставим это

<script type="text/javascript"> 
 $(document).ready(function () {  
  var top = $('#fixed').offset().top; 
  $(window).scroll(function (event) { 
  var y = $(this).scrollTop(); 
  if (y >= top) 
  $('#fixed').addClass('fixed'); 
  else 
  $('#fixed').removeClass('fixed'); 
  $('#fixed').width($('#fixed').parent().width()); 
  }); 
 }); 
 </script> 
 <style>.fixed {position:fixed; top:10px; z-index:9999;}</style> 

Comments

Это надо сделать как дополнение к вышеописанному ? Т.е. обернуть все блоки как в инструкции, а потом последний как вы пишите ? Или вместо чего-то ?

---

TV RUSO,

К выше сказанному не имеет отношение, это как вариант решения задачи.

---

Sentimo,

В первом контейнере обернул последний блок (рабочий, так как там много пустых), ниже всего даписал скрипт. Как мне кажется ничего не поменялось. Может я что-то не ак сделал ?

---

TV RUSO,

Адрес конкретной страницы где установили....

---

Sentimo,

Ну я это прописал всё в "первый контейнер". Обернул блок в котором есть данные, потому-что после него просто есть пустые блоки 

 

<div id="fixed">
<!-- <block4> -->
<?if($CATEGORIES$)?>
<div class="block">
 <div class="blocktitle"><!-- <bt> --><!--<s5351>-->Категории раздела<!--</s>--><!-- </bt> --></div>
 <div class="blockcontent">
 <!-- <bc> -->$CATEGORIES$<!-- </bc> -->
 </div>
 </div>
</div>
<?endif?>
<!-- </block4> -->
<!-- </bc> -->
 </div>
 </div>

<!-- </block5> -->
<!-- </bc> -->
 </div>
 </div>
<!-- </block5> -->
<script type="text/javascript"> 
 $(document).ready(function () {  
  var top = $('#fixed').offset().top; 
  $(window).scroll(function (event) { 
  var y = $(this).scrollTop(); 
  if (y >= top) 
  $('#fixed').addClass('fixed'); 
  else 
  $('#fixed').removeClass('fixed'); 
  $('#fixed').width($('#fixed').parent().width()); 
  }); 
 }); 
 </script> 
 <style>.fixed {position:fixed; top:10px; z-index:9999;}</style> 

В конце всего дописал скрипт. Проверить можно наверно да хоть на этой странице http://tvruso.ru/index/kanaly/0-12. В ней ведь тот-же первый контейнер ?

---

TV RUSO,

Это блок категорий раздела, но категорий у вас просто нет, и нечего фиксировать.

Answer 2

Ранее пользовался подобной реализацией, использовал решение от автора - здесь.

Comments

Что то не понял куда что. Выбрал "Самый рабочий способ" . Создал файл, кинул в корень. "Подключаем скрипт" это куда прописать ? Прописал в "страницы сайта. А вот куда вставить вот код в боковую колонку не понял, да и что внутрь него заполнить тоже.

---

TV RUSO,

Читаем описание к скрипту, там все очень детально разжевано. В код:

<div class="sticky-block"> <div class="inner"> Здесь вставляем тот код, который должен двигаться. </div> </div> 

то есть в вашем случае ваш отдельный блок с первого контейнера или же весь контейнер, тогда оборачиваем все боки в него внутри первого контейнера, не каждый по отдельности, а все. Да, в страницы сайта если скрипт должен работать в модуле редактор страниц.

---

Yuri_Geruk,

НУ да. Сначала так и сделал. Но ничего не поменялось. Обернул все блоки.