Как сделать, чтобы фиксированным было только слайд-меню?

Рейтинг: 1Ответов: 1Опубликовано: 19.03.2015

Беда, значит, вот в чем. Есть сайт (пока что еще не написан, но начало есть), у которого слайд-меню. И значит, все робит, все гуд, но я хочу сделать его фиксированным. И вот тут-то и проблемка: если делаю меню фиксированным, то фиксированным стает и сам фон с контентом! Как сделать так, чтоб фиксированной была только слайд-менюшка? HELP ME! Сама проблема https://yadi.sk/d/poRGn3lAfBZgX ВОПРОС ЕЩО АКТУАЛЕН!) Либо если можно то какое то подобное меню! Заранее СПАСИБО!

css html
Источник: Stack Overflow на русском

Ответы

▲ 3

Это тебе поможет! Демо здесь!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Добро пожаловать!</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
        <script>
            var h_hght = 150; // высота шапки
  var h_mrg = 0;    // отступ когда шапка уже не видна
  $(function(){
   $(window).scroll(function(){
      var top = $(this).scrollTop();
      var elem = $('.top_menu');
      if (top+h_mrg < h_hght) {
       elem.css('top', (h_hght-top));
      } else {
       elem.css('top', h_mrg);
      }
    });
  });
        </script>
        <style>
body {
    margin: 0;
    padding: 0;
}
    /*шапка*/
.header{
    height:150px;
    background: #4095de;
}
/*фиксированное плавающее меню*/
.top_menu{
    top: 150px; /*высота шапки в пикселях*/
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    background: #de4040;
    color: #FFF;
    text-align: center;
    font-size: 40px;
    position: fixed;
    z-index: 1000;
}
.content{
    width: 100%;
    height: 2000px;
    margin: 0;
    padding: 0;
    background: #5d5a5a;
}
        </style>
    </head>
    <body>
        <div class="header"></div>
        <div class="top_menu">Как дела!</div>
        <div class="content"></div>
    </body>
</html>