невозможно получить прокрутку, когда положение: исправлено - элементы исчезают с экрана - PullRequest
Новая
       1

невозможно получить прокрутку, когда положение: исправлено - элементы исчезают с экрана

2 голосов
/ 06 ноября 2011

Верхняя панель (исправлено) - как видно из твиттера и фейсбука, я пытался имитировать то же самое в веб-проекте, над которым я работаю, - независимо от того, сколько я стараюсь, контент исчезает за пределами прокрутки. 1001 *http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

но содержимое в нем перекрывается при изменении разрешения или при увеличении. Не хотите, чтобы - как мы видим в твиттере / FB - хотите, чтобы прокрутка появлялась при увеличении (или уменьшении разрешения)

С тех пор как 2 дня стекались по этому вопросу, положительного результата не было.

Вот тестовый код, который я отредактировал из учебника - 

        <html>
        <style type="text/css">
        #footpanel {
            position: fixed;
            top: 0; left: 0;
            z-index: 9999;
            background: #e3e2e2;
            border: 1px solid #c3c3c3;
            border-top: none;
            width: 100%;
            height: 25px;
            }
        #footpanel ul {
            padding: 0; margin: 0;
            float: left;
            width: 100%;
            list-style: none;
            border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
            }
        #footpanel ul li{
            padding: 0; margin: 0;
            float: left;
            position: relative;
        }
        #footpanel ul li a{
            padding: 5px;
            float: left;
            height: 16px; width: 36px;
            text-decoration: none;
            color: black;
            position: relative;
        }
        #footpanel a.home{
            width: 50px;
            padding-left: 40px;
            border-right: 1px solid #bbb;
            text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
        }
        #footpanel a.chat{
            width: 126px;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            padding-left: 40px;
            text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
        }
        #footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  /*--Right align the chat and alert panels--*/

        </style>

        <div id="footpanel">
            <ul id="mainpanel">
                <li><a href="#" class="home">A </a></li>
                <li><a href="#" class="profile">B </a></li>
                <li><a href="#" class="editprofile">C </a></li>
                <li><a href="#" class="contacts">D </a></li>
                <li><a href="#" class="messages">E </a></li>
                <li><a href="#" class="playlist">P </a></li>
                <li><a href="#" class="videos">V </a></li>
                <li id="alertpanel"><a href="#" class="alerts">S</a></li>
                <li id="chatpanel"><a href="#" class="chat">F (<strong>18</strong>)</a></li>
            </ul>
        </div>

        </html>

Что происходит - при увеличении (или более низком разрешении) выходит содержимое панели ног (я могу предотвратить это с помощью переполнения: скрыто, но это не то, что мне нужно) контейнера (панели ног)

Что я хочу, чтобы он делал - как твиттер / FB, я хочу, чтобы появился свиток и панель навигации, чтобы сохранить свой макет и не упасть с места.

Пожалуйста, помогите - CSS новичок

Ответы [ 2 ]

3 голосов
/ 06 ноября 2011

Я не могу придумать, как сделать это на чистом CSS, а Twitter, похоже, использует Javascript для достижения этого эффекта.

Сначала установите те же min-width на #footpanel и body. Возможно, вы также захотите установить высоту ваших различных элементов на auto или их эквиваленты, чтобы они хорошо изменялись при масштабировании и изменении размера текста.

Затем поместите этот Javascript на свою страницу: 

<script type="text/javascript">
function hscrollbar() {
    /* First, we need the horizontal scroll position of the viewer's display,
       but there are different ways to call it in JS depending on browser.
       I'm using the if/else shorthand notation to detect if a call is legit: 
       somevar = (statement) ? statement_true_value : statement_false_value */
    var left = 
        /* window.pageXOffset should work for most recent browsers: */
        window.pageXOffset ? window.pageXOffset : 
        /* If it DOESN'T, let's try this: */
        document.documentElement.scrollLeft ? document.documentElement.scrollLeft : 
        /* And if THAT didn't work: */
        document.body.scrollLeft;

    /* Now that we have the horizontal scroll position, set #footpanel's left 
       position to NEGATIVE the value, so it APPEARS to follow the scroll: */
    document.getElementById('footpanel').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>

Удалите все комментарии серым цветом, чтобы разблокировать код!

1 голос
/ 31 декабря 2013

На тот случай, если кто-то наткнулся на этот ответ (например, я) и не нашел ответ @ LucyLou работающим (со всем уважением), я получил его из ответа @ Vimal на другой вопрос :

Не нужно устанавливать минимальную ширину и вместо этого ставить этот Javascript: 

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