如何使用 jquery.transit 使侧边栏进入视图并保持在顶部答案

【问题标题】：How to make a sidebar move into view and stay at the top using jquery.transit如何使用 jquery.transit 使侧边栏进入视图并保持在顶部
【发布时间】：2018-05-16 18:16:31
【问题描述】：

我正在使用jquery.transit 转换在按钮单击时将侧边栏移动到视图中，我几乎让它工作，除了它出现在“leftpad”div 下而不是显示在它旁边。这可能是因为我必须在 css 中使用 position:relative 才能进行转换。如果我使用固定位置，则侧边栏根本不会出现，但“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>

【问题讨论】：

你的html 中的#openNav 元素在哪里？你还有两个未闭合的标签
我复制的 HTML 很糟糕。道歉。我编辑了问题，现在应该很清楚了。
我认为 jquery.transit 是对这个库的引用：ricostacruz.com/jquery.transit 你可能应该编辑提及...
感谢您的好建议。链接现已添加。

标签： jquery html css css-transitions

【解决方案1】：

解决这个问题的方法很简单。首先，在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();
});

【讨论】：