Проблема с фиксированным заголовком - без горизонтальной прокрутки - PullRequest
Новая
       0

Проблема с фиксированным заголовком - без горизонтальной прокрутки

3 голосов
/ 24 марта 2012

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

<body>    
        <header>
            <div id="topHeader">
                <p>test</p>
            </div>
                <nav>
                    ... navigation items ...
                </nav>            
        </header>
        <div id="content">
            @RenderBody()
        </div>    
</body>

CSS 

#content{margin-top:80px;}
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;}
header
{   
    width: 100%;
    position: fixed;
    top: 0;
}

Ответы [ 5 ]

3 голосов
/ 13 июля 2013

Это сработало для меня, чтобы получить поведение заголовка Facebook 

<div id="headercontainer" style="position: fixed; width: 100%">
  <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto">
  </div>
</div>

со следующим jquery: 

<SCRIPT>
    $(window).scroll(function() {
    $('#actualheader').css('left', -$(this).scrollLeft() + "px");
    });
</SCRIPT>

Не проверен на совместимость

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

Вы не можете сделать это в html / css. Перейдите на этот сайт и сожмите окно браузера вниз, нижний колонтитул будет зафиксирован, и вы потеряете содержимое справа, но если вы используете горизонтальную полосу прокрутки, она переместится. Я сделал это с помощью jquery. Вот код, который я использовал. По сути, я перемещаю то, что находится внутри фиксированного элемента div, в зависимости от местоположения прокрутки Windows. 

    if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
$(window).scroll(function() {
  if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
  else {
    $('#copyright').css({ 'left': '20px' });
    $('#click-to-call, #erving').css({ 'right': '20px' });
  }
});

});

0 голосов
/ 31 января 2013

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

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

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

'Save dynamic employee panel height into property using javascript.
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

Я помещаю это в тело

id = "objMasterPageBody" onresize = "positionContentBelowHeader ()";

> 

           <script type="text/javascript">

               function positionContentBelowHeader() 
               {
                    //Set header height
                    var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight;
                    document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;            //margin: 0px auto 0px auto; height: 100%;
                    document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px");

               }

            </script>
0 голосов
/ 24 марта 2012

Используйте минимальную ширину. и дать старому браузеру другой опыт, или вы можете написать несколько js, чтобы сообщить заголовку, что он никогда не станет меньше, чем [число]. Это решение должно исправить это для Современные браузеры . 

header{   
    min-width:960px;
    width: 100%;
    position: fixed;
    top: 0;
}
0 голосов
/ 24 марта 2012

Вы устанавливаете ширину на 100%, что в данном случае означает 100% области просмотра.Элемент не будет расширяться после этой точки, что означает отсутствие горизонтальной полосы прокрутки.

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

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

Нет похожих вопросов

...