Как сделать «Фиксированный» элемент Scrollable - PullRequest
Новая
       36

Как сделать «Фиксированный» элемент Scrollable

1 голос
/ 21 февраля 2012

Я знаю, это звучит несколько нелогично, но позвольте мне объяснить, что я пытаюсь сделать.

У меня есть большой элемент, который служит фоном.Это не меняет размер.Он часто больше экрана, на котором он просматривается.Большая часть содержимого этого элемента (это просто изображение) находится рядом с центром.Допустим, единственная НЕОБХОДИМАЯ информация находится в середине 800px, а ширина всего 1600px.

Почему она шире, чем необходимо?Потому что он приятно вписывается в остальную часть фона и добавляет к дизайну сайта.

Поэтому я исправил элемент и использовал стандартную уловку для его центрирования.Отлично работает на большом мониторе.Он остается в центре, если некоторые из них слишком велики, он не позволяет вам прокручивать, чтобы увидеть, что в принципе ничего.Мне это нравится.

Но если экран слишком маленький, вы не сможете увидеть все это.Вы не можете просто установить минимальную ширину или минимальную высоту страницы, потому что при переходе к прокрутке фоновое изображение остается на месте, потому что оно исправлено.

Если был способ получитьфиксированный элемент фактически перемещается вместе со всем остальным, когда страница прокручивается, это будет прекрасно работать, потому что я мог бы указать минимальную ширину для размера требуемых элементов изображения.Это сработало бы очень хорошо.

В противном случае другим решением было бы использование какой-либо другой формы позиционирования, которая позволяет предотвратить возможность прокрутки, чтобы увидеть все это.Затем, опять же, я мог бы просто установить целое с минимальной шириной, что позволило бы мне точно установить, сколько контента прокручивается.

Возможно ли что-нибудь из этого?Я чувствую, что упускаю что-то простое.В идеале мне не пришлось бы изменять размеры изображений, подавать несколько листов CSS или использовать какой-либо сложный JavaScript или что-то подобное.Спасибо за помощь!

Ответы [ 3 ]

2 голосов
/ 21 марта 2012

Я наконец-то решил эту проблему после множества экспериментов, и решение оказалось простым CSS, и это здорово.

Я подробно расскажу об этом решении в моем блоге .В качестве альтернативы вот рабочая демонстрация .

HTML 

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS 

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>
1 голос
/ 21 февраля 2012

Я знаю, что вы предпочли бы не использовать сложный javascript .... библиотека JQuery позволяет вносить небольшие исправления в такие вещи с минимумом кода ... вы также можете использовать относительно небольшой фрагмент без jquery ... в основном все, что вам нужно сделать, это установить прослушиватель событий для window.scroll и установить свой fixedElement.scrollTop в соответствие ...

Пример быстрого JQuery: 

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
0 голосов
/ 21 февраля 2012

Я НЕ УВЕРЕН, я точно знаю, что вы хотите сделать, но приведенный ниже фрагмент кода css может вам помочь. Не уверен. 

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

Вы можете настроить свое местоположение, используя любую комбинацию атрибутов в этом фрагменте, и background-attachment - это то, что делает его прокручиваемым.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...