CSS позиция исправлена. Обертка Div должна быть зафиксирована вертикально, но должна изменяться по горизонтали

У меня есть div, что-то вроде этого

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

Положение фиксируется, когда я прокручиваю вертикально или горизонтально. Но я хочу, чтобы div был зафиксирован, когда пользователь прокручивает полосу прокрутки по вертикали, но должен изменяться, когда пользователь прокручивает полосу прокрутки по горизонтали.

Я видел некоторые форумы и сообщения, но в основном я нашел скрипт jquery. Я хочу знать, есть ли способ сделать это в CSS?

Фиксированная позиция только в одном направлении Я прочитал этот пост, но я не понял сценарий jquery. Пожалуйста, дайте мне знать, как сделать это в CSS или лучший способ сделать это с помощью jquery. Спасибо

Ответы на вопрос(4)

Решение Вопроса

невозможно получить это "хорошо выглядеть" только с CSS / HTML. Как уже упоминалосьRuup или жеФиксированная позиция только в одном направлении, наложение на JS для этого, является хорошим вариантом.

К счастью, я нашел способ заставить его работать как-то (не так красиво): http://jsfiddle.net/MKEbW/5/

HTML (внутри тега body):

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS:

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

& # X200B; , работает в IE7 + и современных браузерах, протестировано через browserlab.adobe.com.

Протестировано с полосами прокрутки, меньшими и широкими областями просмотра в Chrome 18.

Я рекомендую запасной вариант для не способных браузеров и / или обходного пути JS.

что вам нужно. Вы можете скопировать точный сценарий.

$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});

Div CSS выглядит так (вероятно, не нижний колонтитул, когда он имеет верхний 0px: P, но хорошо)

#footer
{  position:fixed;
   left:40px;
   top:0px; 
}

Когда вы прокручиваете скрипт jquery, просто настраивает левую (x) координату на то же значение, что и scrollLeft окна.

 09 июн. 2016 г., 16:55
Все, кто читает это, пожалуйста, обратите внимание, это работает, однако вы должны иметь jQuery, связанный в вашем.html файл для его работы.

мя он будет оставаться 40px слева всегда. Для того, чтобы изменить положение левого поля относительно размера окна, вы должны использовать проценты и отрицательные поля. например, чтобы центрировать фиксированный div:

     #centered { 
          height: 350px;
          top: 0;  
          position: fixed;
          width: 1024px; 
          left: 50%; 
          margin-left: -512px; 
          z-index: 9999;
          }

обратите внимание, что ваша отрицательная граница должна быть ПОЛНОСТЬЮ шириной вашего div. если вы хотите, чтобы это было 40px слева от центра, вы бы добавили еще 40px к margin-left.

Измененный код JavaScript для перемещения фиксированного div по горизонтали

$(window).scroll(function(){
  $('#footer').css('left',-$(window).scrollLeft());
});
 09 июн. 2016 г., 16:55
Все, кто читает это, пожалуйста, обратите внимание, это работает, однако вы должны иметь jQuery, связанный в вашем.html файл для его работы.

Ваш ответ на вопрос