Responsive fixed block

Суть такая: нужен был fixed sidebar, но если блок fixed, то при уменьшении экрана по высоте он начинает «»съедаться», нужно было это как то решать.

Ура ура! Как раз искал такое решение и оно нашлось :-)

Суть такая: нужен был fixed sidebar, но если блок fixed, то при уменьшении экрана по высоте он начинает "съедаться", нужно было это как то решать.

Есть 2 способа решения:

  1. С помощью @media screen;
  2. И с помощью jquery.

C @media screen это будет примерно так:

@media screen and (min-height: 768px) { }

А с jquery так:

jQuery(document).ready(function($) {
    $(document).ready(function () {
         var setResponsive = function () {
              if ($(window).height() > $(".sidebar").height() + 50) { // Is the window taller than the #adminmenuwrap by 50px or more?
                  $('.sidebar').css('position', 'fixed'); // ...if so, make the #adminmenuwrap position:fixed
              }
              else {
                  $('.sidebar').css('position', 'relative'); //...otherwise, leave it relative
              }
          }
      $(window).resize(setResponsive);
      setResponsive();
    });
  });

 

Мой примерчик можно глянуть тут: ссылка

Ну и собственно пруф линк на оригинал: http://css-tricks.com/responsive-web-above-the-fold/