Позиция фиксированная, но все еще прокручиваемая?

Возможно ли иметь позицию DIV: исправлено, но если содержимое этого DIV выходит за пределы области просмотра экрана, вы можете еще прокручивать окно? Я положил все, что я до сих пор в этом ...Позиция фиксированная, но все еще прокручиваемая?

FIDDLE

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

.expand { 
    display: block !important; 
    position: fixed; 
    -webkit-backface-visibility: hidden; 
    top: 50px; 
    left: 0; 
    background: rgba(31, 73, 125, 0.8); 
    width: 100%; 
    z-index: 999; 
}

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

Спасибо!

источник

2015-06-09 Protocol Zero

http://stackoverflow.com/questions/3837037/div-with-scrollbar-inside-div-with-positionfixed гм? – ventaquil

В этом вопросе никогда не было выбранного ответа, так какой ответ вы имели в виду конкретно? –

Многие люди пишут о 'overflow-y: scroll;' поэтому я думаю, что это поможет вам в решении вашей проблемы. – ventaquil

Да, вам просто нужно дать Див фиксированную высоту и overflow: auto настройки

(Demo)

.expand { 
    bottom: 0; 
    overflow: auto; 
}

Если вы не хотите, чтобы придать ему минимальную высоту, простой (но not supported by old browsers) вариант будет использовать CSS calc() как так

.expand { 
    max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav. 
}

Я хотел бы предложить настройки высоты запасной перед тем в случай браузер не поддерживает известково

JavaScript

Чтобы достичь того, чего вы действительно хотите, что вам нужно JavaScript. Вот.

Проверьте, чтобы увидеть, если меню открыто, если не ...

Определить проверку, чтобы увидеть, если содержимое больше видовом, если да, то установить bottom: 0px; и overflow: auto и удалить прокрутке из тело.

Если это так ...

Удалить все стили из меню и тела, которые были добавлены при открытии меню.

(Demo)

(function($) { 
    var menu = $('.responsive-menu'), open; 
    $('.menu-btn').click(function() { 
     if(!open) { 
      if(menu.height() > $(window).height()) { 
       open = true; 
       menu.css({'bottom': '0px', 'overflow': 'auto'}); 
       document.body.style.overflow = 'hidden'; 
      } 
     } else { 
      open = false; 
      menu.css({'bottom': '', 'overflow': ''}); 
      document.body.style.overflow = ''; 
     } 
     menu.toggleClass('expand'); 
    }); 
})(jQuery);

источник

2015-06-09 23:24:37

Позиция фиксированная, но все еще прокручиваемая?

ответ

Смежные вопросы