css изображение фиксированное по горизонтали абсолютное по вертикали

Question

У меня в настоящее время есть изображение в div, которое установлено на фиксированное, и мне нравится, как его поведение, однако я хочу, чтобы он также вел себя так, как будто это абсолютно при прокрутке вверх и вниз. Другими словами, я хочу фиксированное поведение по горизонтали, но абсолютное по вертикали (чтобы я добавлял к нему контент и мог прокручивать вниз и видеть все изображение). Надеюсь, я поняла. Heres мой HTML:

<div id="graphpaper"> 
    <img src="Background2.jpg" /> 
</div> 

Мой CSS:

#graphpaper{ 
    position:fixed; 
    left:50%; 
    margin-left:-800px; 

    width:1600px; 
    height:1600px; 

    z-index:-10; 
} 

Answer 1

Спасибо за вашу помощь. Я нашел решение: это по существу переместит фиксированный div вверх (обратите внимание на знак отрицания перед scrollVar), который будет напоминать абсолютное прокручиваемое поведение.

$(document).ready(function() { 
    $(window).scroll(function() { 
     var scrollVal = $(this).scrollTop(); 
     if (scrollVal >= 0) { 
      $('#graphpaper').css({'position':'fixed','top' :-scrollVal}); 
     } 
    }); 
}); 

Answer 2

Это не простая тема. Единственный способ добиться этого - использовать javascript. У вас есть 2 способа сделать это.

1. Используйте положение фиксированной и крюк окна прокрутки события и изменения вертикального положения с JavaScript на свитке
2. Используйте позицию абсолютного (поэтому изображение свитков с окном) и снова с JavaScript на горизонтальной прокрутки изменить горизонтальное расположение ,

Основной пример (он не будет работать, но это то, что вам нужно начать с):

$(window).scroll(function(){   
    $('#fixedImage').css('top', $(window).scrollTop()); 
});