CSS / JQuery: прокрутка, наложение div и центрированный макет - как получить его в несколько фиксированной позиции? - PullRequest
Новая
       18

CSS / JQuery: прокрутка, наложение div и центрированный макет - как получить его в несколько фиксированной позиции?

1 голос
/ 12 марта 2012

После некоторых поисков в Google я не могу вспомнить другие ключевые слова и все еще застрял.

Вот что я получил и хочу получить:
Веб-сайт, для которого используется cms с центрированным макетом (который состоит из навигации, под ним он разделен на часть основного контента и маргинальный столбец и заканчивается нижним колонтитулом) и div, который я хочу использовать в качестве наложения. Чтобы быть точным, он должен заканчиваться прямо над правым столбцом, и он не должен исчезать, если пользователь прокручивает страницу вниз, а оставаться там на верхнем краевом столбце. Позже будет добавлена ​​кнопка закрытия, чтобы скрыть ее, чтобы можно было использовать фактический столбец, но это другая история.

С чем я могу работать, чтобы решить эту проблему:
JQuery, JavaScript, CSS, HTML - но с первыми двумя я совершенно неопытен.

Что я сделал до сих пор:
-Попробовать с позиции: исправлено; абсолютный; опробовано с верхним / левым / правым / нижним и так далее, чтобы заставить его придерживаться там (что, конечно, работает с абсолютным, но не остается сверху, тогда, если пользователь прокручивает)
-Найти какой-нибудь способ сделать это с помощью JQuery (нашел идею Lightbox, тоже думал об этом, но он тоже меняет свою позицию в зависимости от размера окна и поэтому не может быть использован)
-Поиск для CSS-решения (нашел только исправленные вещи и как это сделать в IE, но это не поможет, потому что я связал его с LAYOUT, а не с WINDOW)

И когда я только что специально искал Stackoverflow, я обнаружил некоторый вопрос, который казался похожим, но только то, что этого нельзя было сделать с помощью CSS, и тогда человек сделал бы это с JS - но я не мог найти, КАК это сделать. затем. Так что да. Помогите, пожалуйста?

Я бы предоставил вам сайт, но так как он на самом деле еще не запущен, я не думаю, что с моим боссом все будет в порядке. К сожалению.

Почему, да, тогда мы идем с этим примером. 

<div class="Content">
  <div class="InnerContent">
    Insert text of page here
  </div>

  <div class="MarginalColumn">

    Newsletter<br/>
    Contact <br/>
    Whatever <br/>

    <div class="MargOverlay">
       Here goes some random Text, random length, maybe some picture - that's variable
    </div>
  </div>
</div>

.Content{
    padding: 0 9px 80px 11px;
    position: absolute;
    top: 77px;
    width: 975px;
}

.Content .Innercontent{
    border-right: 1px solid #D9DADB;
    float: left;
    padding: 0 20px 20px;
    width: 714px;
}

.MarginalColumn{
    background-color: #FFFFFF;
    float: right;
    padding: 10px 0 0;
    width: 219px;
}

.MargOverlay {
    background: none repeat scroll 0 0 rgba(0, 106, 178, 0.8);
    color: white;
    height: auto;
    left: 780px;
    max-height: 670px;
    padding: 5px;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 220px;
    z-index: 80;
}

1 Ответ

0 голосов
/ 12 марта 2012

Комбинация CSS и jQuery / JavaScript может исправить это:

JQuery: 

$('#my_overlay').css('position', 'fixed')
.css('top', ($(window).height() - $("#my_overlay").height()) / 2)
.css('left', ($(window).width() - $("#my_overlay").width()) /2)

Вы также можете легко перевести их в базовый JavaScript, но поскольку IE дает вам высоту и ширину окна нечетными способами (до IE 9 вы не можете использовать innerHeight и innerWidth), это немного болезненно задница.

Также position: fixed имеет некоторые проблемы в IE 4-7. Но действительно, IE7? Если вы пытаетесь поддерживать IE7, я чувствую к вам.

...