Простой способ зафиксировать блок по горизонтали или вертикали.
Как хорошо известно, свойство CSS «position:fixed» распространяется как на вертикальное, так и на горизонтальное прокручивание.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<style>
.wrapper{ width: 2500px; height: 2500px;}
#menu{ width: 200px; height: 150px; background: yellow; position: fixed; top: 0px; left:0px;}
</style>
</head>
<body>
<div class="wrapper">
<div id="menu">
</div>
</div>
</body>
</html>
Как видите, желтый квадрат всегда зафиксирован в левом верхнем углу, куда бы мы не скроллировали. Но если вам надо сделать зафиксированное меню, которое будет всегда видно по вертикали, но по горизонтали нет.
Но что поменялось в этом примере? Давайте глянем код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<style>
.wrapper{ width: 2500px; height: 2500px;}
#menu{ width: 200px; height: 150px; background: yellow; position: absolute; top: 0px; left:0px;}
</style>
</head>
<body>
<div class="wrapper">
<div id="menu">
</div>
</div>
<script>
$(document).scroll(function(){
$('#menu').css({
top: $(document).scrollTop()
});
});
</script>
</body>
</html>
Во втором примере, position:fixed мы заменили на position:absolute; а фиксирование по вертикали, сделали через jQuery. Скрипт обрабатывает скролл и устанавливает значение top равное $(document).scrollTop(), то есть текущее значение отступа прокрутки для всего документа.
Теперь давайте сделаем тоже самое, для горизонтальной прокрутки (скроллирования).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://yandex.st/jquery/1.8.1/jquery.min.js"></script>
<style>
.wrapper{ width: 2500px; height: 2500px;}
#menu{ width: 200px; height: 150px; background: yellow; position: absolute; top: 0px; left:0px;}
</style>
</head>
<body>
<div class="wrapper">
<div id="menu">
</div>
</div>
<script>
$(document).scroll(function(){
$('#menu').css({
left: $(document).scrollLeft()
});
});
</script>
</body>
</html>
В этом скрипте, мало что изменилось, за исключением одного, в javascript мы обрабатываем не отступ сверху, а отступ слева, и устанавливаем в стили не top значение, а left.
left: $(document).scrollLeft()
Станьте первым!