Pretor DH

/* Устанавливаем */
$('.spoiler_links').on('click.spoiler1', function(){ ... });
/*   Меняем on click.spoiler1 на on click.spoiler2 */ ;
$('.spoiler_links').off('click.spoiler1').on('click.spoiler2',function(){ ... });
/* Убираем все*/
$('.spoiler_links').off('click');

Поробуй переделать код

function SpoilerDef(){
  $(this).nextAll('.clsbody').toggle(0);
  $(this).nextAll('.spoiler_body').toggle(0);
  return false;
}
function SpoilerUniq(){
  ...
};
$('.spoiler_links').on('click.spoiler',SpoilerDef);

$(document).ready(function(){
  $("#te").toggle(   
    function () {       
      $("#te").text('Заголовки');   
      $('.clsbody').hide(0);
      $('.spoiler_body').show(0);
      $('.spoiler_links').off('click.spoiler').on('click.spoiler',SpoilerUniq);
 }, 	    	    
    function () {
     $('.spoiler_body').hide(0);
     $('.clsbody').show(0); 
     $("#te").text('Свернуть');	
     $('.spoiler_links').off('click.spoiler').on('click.spoiler',SpoilerDef);
});
});

Но по идее должно быть по другому, значительно проще:

$(document).ready(function(){
 function SpoilerLink(e){
    ...
    e.stopPropagation();
    e.preventDefault();
 };
 $("#te").toggle(      // Возможно здесь нужно добавить к селектору ',.spoiler_links'
    function () {       
      $("#te").text('Заголовки');   
      $('.clsbody').hide(0);
      $('.spoiler_body').show(0);
      $('.spoiler_links').on('click.spoiler',SpoilerLink);
    }, 	    	    
    function () {
     $('.spoiler_body').hide(0);
     $('.clsbody').show(0); 
     $("#te").text('Свернуть');	
     $('.spoiler_links').off('click.spoiler');
    });
});

Селектор добавь если .spoiler_links лежат вне спойлера и при первом клике по ним должен вызывается спойлер.

На чистом CSS это смотрится так JSFiddle

.small {
 ...   /* здесь спозицинируйте малый банер */
}
.big {
   display: none;
}
header:hover .big {
    display: block;
    position: absolute;
   ...  /* здесь спозицинируйте и анимируйте большой банер */
}

Блоки Fixed видимо идут в потоке - что и тянет за собой выше описанные проблемы.
Попробуй так JSfiddle, должно помочь.

html,body {
    position:absolute;
    top:0;bottom:0;
    left:0;right:0;
    overflow:hidden;
}
body {
    overflow:auto;
}
.modal {
    position:fixed;
    top:0;bottom:0;
    left:0;right:0;
}

ДОБАВЛЕНО:
Если создаешь модальное окно динамично, в модальной форме на любой елемент input добавь autofocus:
<input id="yourtextbox" ... autofocus />
Если критично в .js запомни позицию скрола в нужных элементах, при автофокусировке скролы могут уехать куда вздумается. А если модальное есть в документе но спрятано, то в функции показа модального можно добавить:

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

А после закрития модального окна восстанови эти позиции.

Всегда прокручивается именно тот блок, что под курсором. Мож у тебя драйвер мыши со своей "китайской" логикой.

Смотри пример: JSFiddle
В третьем блоке хитрая аномалия. Где скрол спрятан за размеры блока. Скрол уже кончился а блок всё ещё прокручивается.

Вот статья про Bootstrap и 3 колонки одинаковой высоты.
Но лично мене не нравится такое решение.

Вот решение в 3 правила адаптивное по ширине и высоте .

<main>
    <div>
        <p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
</main>

main {
    position:relative;     /* должно быть отлично от static */
    overflow:hidden;
}
div {
    vertical-align:top;
    position:relative;
    display:inline-block;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
    content:'';
    position:absolute;
    left:0;right:0;
    bottom:-1000%;      /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
    top:0;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    background:gray;
}

Онлайн тестировщик регулярных выражений

Водишь выражение и данные получаешь полную расшифровку. Можно переключаться между разными функциями из PHP и JS.

А в твоем случае: [^ (<br \/>)]\s*\n
И это будет работать в обоих языках.

По-моему "как правильно" некоректно задан вопрос.
В первую очередь правльно нужно построить архитектуру CSS.

Пример:
- визульное представление, функциональное, динамическое пишутся в разных стилях;
- добавляются в виде class = "visual1 animation2 do3";
- а в общем стиле нужно написать .visual1.animation2.do3 {};
- это заложено в основу CSS, и работает быстрее чем туча стилей с разными названиями для каждого блока.

Для решения твоей задачи воспользуемся селектором :target и событием onhashchange...

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li title="Action" id="action" ><a href="#action">Action</a></li>
    <li title="Another action" id="aaction"><a href="#aaction">Another action</a></li>
    <li title="Something else here" id="some"><a href="#some">Something else here</a></li>
    <li class="divider"></li>
    <li title="Separated link" id="separ"><a href="#separ">Separated link</a></li>
  </ul>
</div>

<script>
window.onhashchange = function(e){ 
	        var secure = '; secure';
/* имя поля куки */
	        var name = 'menu';
/* ложим пункт меню в шапку сайта */
	        document.title  = document.getElementById(window.location.hash.substring(1)).title; 
/* ложим пункт меню в куки сайта */
	        document.cookie = [   name, '=', encodeURIComponent(document.title), secure].join('');
});
</script>

<style>
/* CSS */
 li[id]:target {
    /* здесь позиционируеш блок li в шапке меню */
}
</style>