Форум

gtxtymt · #1 (**permalink**) 13.08.2015, 18:16

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

Не очень хорошо дружу с 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 от необходимого места. Как с этим бороться, подскажите пожалуйста

EmperioAf · #2 (**permalink**) 13.08.2015, 19:15

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

var h_hght = 150;

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

var h_hght = 0;

gtxtymt · #3 (**permalink**) 13.08.2015, 19:29

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

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

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

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

EmperioAf · #4 (**permalink**) 13.08.2015, 20:11

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

<!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>

Форум

Справочник

Discord чат

Курсы javascript