0. Сайдбар и контент в блоке с margin: 0 auto и фиксированной шириной. Это я к тому что сайдбар не приклеен к левому краю окна.
1. Как сделать красивую анимацию без position: fixed я не знаю. Да и думаю ничто не сможет сделать её так круто как position:fixed, потому что в этом случае это не анимация а её отсутствие. Иными словами навешивание событий на скролл выглядит стрёмно и заставляет сайдбар либо ездить с большим отставанием либо дергаться.
2. Если left не выставлять, то при зуме внутрь (то есть когда границы враппера остаются за экраном) сайдбар приклеивается к левой границе окна и налезает на контент.
3. Если выставить left: 50% и margin-left: -500px (половина враппепа), то всё будет ок опять же до первого зума внутрь и смещении центра экрана. Сайдбар начнёт ездить, потому что left: 50% определяет центр экрана и теперь он не в центре враппера.
4. Во время зума и скролла JS на iPad отрубается и как следствие код меняющий position: fixed на relative или static спасает ситуацию только на компе. То есть если юзать position: fixed на iPad, то садйбар 100 пудов залезет на контент.
Ну вот я и думаю реально ли это вообще?
как вариант:
— Слушаешь событие scroll для окна, при скролле сверяешь начальное положение блока с высотой прокрутки, если изменилась то дальше уже меняешь положение либо через абсолютное позиционирование, либо отступами сверху.
ещё можно взять готовое решение на jquery, их полно
Простой