Festem
Постоялец
- Регистрация
- 4 Сен 2014
- Сообщения
- 97
- Реакции
- 27
- Автор темы
- #1
Помогите с фиксированным слоем. Сделал клиенту сайт, где верхнее меню это div с атрибутом стиля position:fixed. В двух словах накидал в спойлере
Суть вопроса вот в чем. Дизайн работает везде хорошо, кроме одного момента - масштабирование на планшете вызывает неудобство из-за того что срезается правая часть фиксированного блока. Пример этого можно увидеть если открыть браузер на пол окна.
Можно ли как то прокручивать это блок по горизонтали вместе с контентом, но при этом оставлять на месте при вертикальном скроле?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Для просмотра ссылки Войди или Зарегистрируйся">
<html xmlns="Для просмотра ссылки Войдиили Зарегистрируйся">
<style>
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
outline: medium none;
}
body {
background-color: #CCCCCC;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<body>
<div style="position:fixed; width:100%; border:2px solid #999999; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.<br />
<a href="#post1">P1</a> <a href="#post2">P2</a> <a href="#post3">P3</a> <a href="#post4">P4</a> <a href="#post5">P5</a> <a href="#post6">P6</a></div>
<div style="width:1100px">
<div>
<a name="post1" class="top"></a><h2>Foo1</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post2" class="top"></a><h2>Bar2</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, venonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post3" class="top"></a><h2>Bar3</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit aunonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</p>
</div>
<div>
<a name="post4" class="top"></a><h2>Bart4</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post5" class="top"></a><h2>Bar5</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit auguenonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post6" class="top"></a><h2>Bar6</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
</body>
</html>
<html xmlns="Для просмотра ссылки Войди
<style>
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
outline: medium none;
}
body {
background-color: #CCCCCC;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<body>
<div style="position:fixed; width:100%; border:2px solid #999999; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.<br />
<a href="#post1">P1</a> <a href="#post2">P2</a> <a href="#post3">P3</a> <a href="#post4">P4</a> <a href="#post5">P5</a> <a href="#post6">P6</a></div>
<div style="width:1100px">
<div>
<a name="post1" class="top"></a><h2>Foo1</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post2" class="top"></a><h2>Bar2</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, venonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post3" class="top"></a><h2>Bar3</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit aunonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</p>
</div>
<div>
<a name="post4" class="top"></a><h2>Bart4</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post5" class="top"></a><h2>Bar5</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit auguenonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
<div>
<a name="post6" class="top"></a><h2>Bar6</h2>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusnonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</div>
</body>
</html>
Суть вопроса вот в чем. Дизайн работает везде хорошо, кроме одного момента - масштабирование на планшете вызывает неудобство из-за того что срезается правая часть фиксированного блока. Пример этого можно увидеть если открыть браузер на пол окна.
Можно ли как то прокручивать это блок по горизонтали вместе с контентом, но при этом оставлять на месте при вертикальном скроле?
