Kovalsky

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

Видимый слайд у вас имеет "position: absolute" и по этому поводу занимает верхний слой над остальным контентом родителя, остальные слайды последовательно выстроены в вертикальный ряд и спрятаны с помощью "visibility: hidden; opacity: 0;". Так как к свойству "position" нельзя применить transition, когда вы переключаете слайд, текущий слайд сразу же получает "position: relative" и занимает свое место в вертикальном строю, а целевой слайд сразу же получает "position: absolute" и выскакивает на место предыдущего. То есть при переключении текущий слайд моментально исчезает, после чего сразу же становится виден первый видимый в ряду слайд (который прозрачный), а целевой слайд занимает top-овый слой и ему остается еще целая секунда, чтобы получить 100% opacity То есть в вашем варианте при каждом переключении пользователь видит три слайда: текущий, потом первый видимый в ряду и только потом - целевой. Отсюда и возникает эффект плавного перехода когда вы переключаетесь с 1 на любой другой или со 2 на 1: в этих случаях нету промежуточно видимого слайда, их участвует только двое, поэтому переход получается плавный.

В целом, я бы для начала поменял верстку как-нибудь) Тогда все будет просто.

Но если вы религиозно придерживаетесь вашей собственной верстки, то для нее я придумал такой вариант решения: разделить свойства класса .show на те, которые нужно анимировать, и на те, которые не нужно анимировать, и не анимируемые снимать со слайдов только в конце анимации, чтобы во время переключения в верхнем слое было два видимых слайда. Получилось так:

.slider_artists .show {
  opacity: 1;
}
.slider_artists .position {
  position: absolute;
  top: 0;
  left: 0;
}

При переключении целевой слайд получает сразу два класса - .show и .position, а текущий лишается сначала класса .show, а потом и .position, когда отыграется анимированный переход к дефолтным для img стилям. Последнее можно было сделать, например, добавив для слайдов eventListener на transitionend, который будет убирать класс .position c текущего элемента (хотя еще можно было по клику на control не только убирать класс .show, а еще оставлять setTimeout для текущего элемента на 1000 миллисекунд, который также будет убирать класс .position). Как-то так:

for(var i = 0; i < sliderLength.length; i++){
  sliderLength[i].addEventListener("transitionend", function() {
    if (!hasClass(this,'show')) {
      this.classList.remove('position');
    }
  }, false);
}

Готовый вариант на codepen.io

PS: А таки зачем вы сначала указываете transition для всех img, а потом еще раз его указываете для .show ?) Таки в момент когда img получает .show, он уже имеет нужный transition)

Если лень читать - пример

То есть вы хотите сделать так, чтобы при прокрутке скроллился только блок диалогов, да?

Если я правильно понял вопрос, то скажите, что значит ваша фраза "Кроме перекрытия блока другим блоком через fixed"? Эдак не получится) Потому что визуальная часть vk.com именно с использованием fixed и устроена: есть основной блок фиксированной ширины, внутри него блок контента, который слева и сверху сжат одним блоком sidebar и несколькими header блоками. Поведение этих блоков регулируется классом .im_fixed_nav, который вешается на элемент body: на обычных страницах, например странице пользователя, контент прокручивается вместе с сайдбаром и хэдером, ибо эти блоки имеют по дефолту свойство position: relative;, а на странице диалогов прокручивается только контент, потому что блоки sidebar и header получают position: fixed;. Вот правило, которое за это отвечает:

.im_fixed_nav #page_header, .im_fixed_nav #side_bar {
    position: fixed;
}

Вообще, структура DOM у vk.com довольно запутанная, но если упростить, выглядит она так:

body

	div.scroll-fix-wrap

		div.scroll-fix

			div.page-layout {

				div.header

				div.sidebar 

				div.content

			}

Названия блоков мною выбраны так, чтобы наиболее доступно показать как именно реализован scroll-fix. Некоторые названия блоков, которые я здесь использую, действительно используются vk.com, но не все, поэтому не ищите 100%-го совпадения.

Тут я набросал скелетик vk.com, который показывает, как это все происходит, как структуру так и переключение между режимами скролла. Там найдете ответ на свой вопрос.

На сайте вконтакте размеры большинства основных блоков задаются динамически, например считаются onscroll; в моем примере все не так круто, никакого динамического подсчета нету, но я честно разделил указания размеров так же, как на vk.com: статические - указаны в css, динамические - в html, индвидиуально для каждого элемента, который нуждается в динамическом пересчете размера.

Кстати если я правильно понял данный кусок php, у вас этот js выполняется столько раз, сколько у вас элементов в массиве $humans. Это же не дело, надо js вынести, если не в отдельный .js, то хотя бы из foreach. И зачем вам вообще нужен элемент lastdiv? Мне кажется его можно смело исключить. Получится как-то так:

<div class="teams_block">
<script type="text/javascript">
$(document).ready(function(){
	var team_elements = $('.team_element'), 
		round_blocks = $('.round_block');

	$('.team_element').on('click', function(){
		var self = $(this), 
			team_description = $('<div class="team_description"><center><img src="/img/spinner_32.gif"></center></div>');
		self.find('.team_description').remove();
		self.append(team_description);
		team_description.load('/command/humandescription?id='+self.data('id'), function(){
			$(this).css('display','block');
		});
		team_elements.removeClass('active');
		round_blocks.removeClass('active');
		self.addClass('active');
		self.find('.round_block').addClass('active');
	});
});
</script>
<?php foreach ($humans as $human){ ?>
<div class="team_element" data-id='<?= $human->id ?>'>
	<div class="round_block">
		<img src="/images/<?= $human->image ?>" />
	</div>
	<div class="title"><?= $human->name ?></div>
	<div class="desc"><?= $human->office ?></div>
	<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
</div>
<?php } ?>
</div>