Javascript-форум - Фиксированое положение блока по вертикали

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Фиксированое положение блока по вертикали (https://javascript.ru/forum/misc/57717-fiksirovanoe-polozhenie-bloka-po-vertikali.html)

Фиксированое положение блока по вертикали

Подскажите пожалуйста, как зафиксировать блок только для прокрутки по вертикали. Для прокрутке по горизонтали, должен смещаться с остальным контентом.

Можно так. Но это костыль

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<style>
*{
    margin:0;
    padding:0;
    outline: 0;
}

.container {
    position: relative;
    margin: 20px;
    width: 1500px;
    height: 1500px;
    border: 1px solid red;
}

.inner {
    margin: 50px;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
  <div class="inner">Внутренний блок</div>
</div>
<script>

function Scroll(){
    var inner = document.querySelector('.inner');
    if ( typeof Scroll.x == 'undefined' ) {
        Scroll.x = window.pageXOffset || document.documentElement.scrollLeft;
        Scroll.y = window.pageYOffset || document.documentElement.scrollTop;
    }
    
    if (!((Scroll.x - window.pageXOffset == 0)&&(Scroll.y - window.pageYOffset== 0))) {
    var diffX = Scroll.x - window.pageXOffset;
    var diffY = Scroll.y - window.pageYOffset;
    }

    if (diffX != 0){
      inner.style.position = 'relative';
      inner.style.top = Scroll.y +'px';
      inner.style.left = null;
    }
    if (diffY != 0){
      inner.style.position = 'fixed';
      inner.style.top = null;
      inner.style.left =20 - Scroll.x + 'px';
    }
    Scroll.x = window.pageXOffset;
    Scroll.y = window.pageYOffset;
}

window.onscroll  = Scroll;
</script>
</body>

</html>

Спасибо. Только при прокрутке сначала вниз, а потом в сторону блок перескакивает на верх. Как сделать чтобы он смещался в сторону с остальным контентом, но только уже не сверху, а на той высоте, куда его опустили.

Цитата:

Сообщение от Иван Федорович (Сообщение 384474)

не понял, что вы хотите. Попробуйте убрать эту строку:

inner.style.top = Scroll.y +'px';