Javascript-форум - Плавающее меню

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Плавающее меню (https://javascript.ru/forum/dom-window/57663-plavayushhee-menyu.html)

Плавающее меню

Здравствуйте.

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

var h_hght = 150; // высота шапки
  var h_mrg = 0;    // отступ когда шапка уже не видна
  $(function(){
   $(window).scroll(function(){
      var top = $(this).scrollTop();
      var elem = $('#top_nav');
      if (top+h_mrg < h_hght) {
       elem.css('top', (h_hght-top));
      } else {
       elem.css('top', h_mrg);
      }
    });
  });

Проблема в том, что при добавлении необходимых свой css

Код:

   position: fixed;

   z-index: 1000;

шапка становится плавающей, да. Но не прилипает к верхней части и находится как раз в 150px от необходимого места. Как с этим бороться, подскажите пожалуйста

очевидно же, что вместо

var h_hght = 150;

надо написать:

var h_hght = 0;

Цитата:

Сообщение от EmperioAf

очевидно же, что вместо
var h_hght = 150;

надо написать:
var h_hght = 0;

Да если бы. Стили css пока не добавлял, но толку от изменения 0. http://demo.gtxtymt.ru/

У меня всё работает с твоим кодом

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
*{
    margin:0;
    padding:0;
    outline: 0;
}

#top_nav {
    width: 100px;
    height: 100px;
    border:1px solid red;
    position: fixed;
}

.container {
    width: 100px;
    height: 3000px;
}
</style>
</head>
<body>
    <div class="container">
        <div id="top_nav">123456</div>
    </div>

<script>
    var h_hght = 150; // высота шапки
    var h_mrg = 0;    // отступ когда шапка уже не видна
  $(function(){
   $(window).scroll(function(){
      var top = $(this).scrollTop();
      var elem = $('#top_nav');
      if (top+h_mrg < h_hght) {
       elem.css('top', (h_hght-top));
      } else {
       elem.css('top', h_mrg);
      }
    });
  });
</script>
</body>

</html>