Как сделать так, чтобы боковая панель двигалась в поле зрения и оставалась наверху с помощью jquery.transit - PullRequest
Новая
       4

Как сделать так, чтобы боковая панель двигалась в поле зрения и оставалась наверху с помощью jquery.transit

0 голосов
/ 15 мая 2018

Я использую jquery.transit , чтобы переместить боковую панель в представление при нажатии кнопки, и я почти заставил ее работать, за исключением того, что она отображается под div 'leftpad' вместо того, чтобы показываться рядом с ним. Это, вероятно, потому, что мне пришлось использовать положение: относительное в css для перехода на работу. Если я использую фиксированное положение, боковая панель вообще не появляется, но элемент 'leftpad' перемещается, чтобы освободить место для него. Я не знаю, как это исправить.

Вот мой код: 

$('#openNav').click(function() {
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#sidebar").transition({ x: '300px', y:'0px' });
  $("#openNav").hide();
});

 $('#closeNav').click(function() {
  $("#leftpad").transition({'padding-left': "0px"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#sidebar").transition({ x: '-300px', y: '0px' });
  $("#openNav").show();
});

Вот CSS: 

#leftpad{
    padding: 0;
    margin: 0;
}

#sidebar {
    height: 100%;
    width: 300px;
    position: relative;
    z-index: 1;
    top: 0;
    left: -300px;
    overflow: hidden;
    text-align: center;
}

Вот HTML: 

<div id="leftpad">
<header role="banner" class="banner_image boxshadowM enclosure1" >
        <div class="gradient2">
            <button id="openNav"  class="button1 boxshadowM">&#9776;</button>
        <h1><strong id="sitetitle">Blockpress</strong></h1>
        <h2 id="tagline"></h2>
        </div>
  </header>
<div id="contentArea" class="boxshadowM enclosure2"></div>
</div>
 <div  id="sidebar" class="enclosure3">
   <button id="closeNav" class="button2">&times;</button>
     <nav>...</nav>
     <footer>...</footer>
</div>

1 Ответ

0 голосов
/ 15 мая 2018

Решение этого довольно простое.Во-первых, в css значение для position должно измениться с relative на fixed.Затем операторы в переходе #sidebar должны измениться.Вместо - должно быть -=.То же самое относится и к положительной стоимости.Я удалил значение y, так как оно ничего не делает.

См. Код ниже: 

$('#openNav').click(function() {
  $("#sidebar").transition({ x: '+=300px' });
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#openNav").hide();
});

$('#closeNav').click(function() {
  console.log('closenav');
  $("#sidebar").transition({ x :'-=300px' });
  $("#leftpad").transition({'padding-left': "0"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#openNav").show();
});
...