Форум

ureech · #1 (**permalink**) 22.11.2014, 18:04

Здравствуйте. На странице горизонтальное меню расположенно снизу страницы (bottom:0). Хотелось бы реализовать, что бы при прокрутки страницы меню фиксировалось при достижении верха окна(top:0)? Нашёл такую ф-цию

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

Так работает, но с пиксилями не пойдёт нужно 100%, но если указываю 100%, то при малейшем скролинге меню сразу прыгает к верху.Подскажите как сделать правильно.

рони · #2 (**permalink**) 22.11.2014, 18:24

ureech,
сохранить top элемента h
в функции скрола измерять h и величину скрола - скрол больше h делать top = скролл иначе top = h

рони · #3 (**permalink**) 22.11.2014, 18:38

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body  {
     height: 2000px;

  }
  .orange {
    background: #FFCC00;
  }
  .orange + div{
    display: block;
  }
  span {
     cursor: pointer;
  }
 #header{
    bottom: 0px;
    position:  absolute;
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var elem = $("#header"), h = elem.offset().top;
	  $(window).scroll(function(){
      var top = $(this).scrollTop();
      elem.css('top', top > h ? top : h )
    });

});
  </script>
</head>

<body>
<div id='header'>


<div class='first'>
<span class='info orange'>Информация</span>
<div class='main'>
<span class='info_show show '>текст1</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация2</span>
<div class='main'>
<span class='info_show '>текст2</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация3</span>
<div class='main'>
<span class='info_show '>текст3</span>
</div>
</div>

</div>


</body>

</html>

ureech · #4 (**permalink**) 22.11.2014, 18:56

Большое спасибо, всё работает.

Форум

Справочник

Discord чат

Курсы javascript