Зафиксировать элемент от определенного места
 

Здравствуйте!

Как зафиксировать элемент, но в определенном пространстве, пример :


Нужно чтобы элемент(красный) поводил себя так, будто я это присвоил свойство: position:fixed; но только чтобы это было в области просмотра элемента родителя ( черного) и красный элемент не выходил из этой области.
Дайте пожалуйста примеры кода.

Родитель, div, id : lastnews
элемент красный , div, id: if_news

А черный родитель имеет полосу прокрутки?

нет, черный элемент: ширина : 285пх, высота: 800пх;
красный: ширина 285пх, высота 100%;

А по картинке не скажешь! Ты чета мутишь.

Твои слова расходятся с картинкой - я не понимаю че те нужно.

родительский блок будет выше высоты экрана* а у красного блока будет высота экрана. извиняюсь неправильно объяснил

вот план: (зеленым экран)

Теперь понятно. Гугли лучше. Тема уже изжеванная.
Решения на чистом css нет (вроде как position:sticky разрабатывали для этого, но реализаций нет вроде пока). Так что без js не обойтись. Смысл js в переключении position:fixed на position:absolute

ясно, спасибо за подсказку!