响应式固定滑动滑杆

Question

使用bootstrap我创建了一个侧边栏。在开始时，只显示字体真棒图标，在悬停时它会向左移动，使其他部分可见。

问题：根本没有响应。 （我的原因是我完全错了）

我希望在悬停在任何尺寸的屏幕上之前，只显示字体真棒图标。

所有屏幕尺寸的预期输出：

＆＃13;

＆＃13;

.sidebar-fixed-right {
    top: 20rem;
    right: -20.2%;
    position: fixed;
    transition-property: right;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    opacity: 0.8;
}

.sidebar-fixed-right:hover {
    right: -10%;
    text-decoration: none;
    opacity: 1.0;
}
.sidebar-text {
    padding-left: 1.2rem;
    text-decoration:none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 pull-right sidebar-fixed-right">
    <div class="widget" style="width:20rem">
        <div class="widget-content widget-content-full">
            <table class="table table-borderless table-striped table-vcenter">
                <tbody>
                    <tr>
                        <td>
                            <a class="nodecoration" href="#">
                                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                                <span class="sidebar-text">Hello There</span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新了您的代码版本，

＆＃13;

＆＃13;

html,body{
  overflow-x:hidden;
  height:100%;

}

.sidebar-fixed-right {
    top:100px;
    right:-100px;
    position: fixed;
    transition-property: right;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    opacity: 0.8;
}

.sidebar-fixed-right:hover {
    right:0;
    text-decoration: none;
    opacity: 1.0;
}
.sidebar-text {
    padding-left: 1.2rem;
    text-decoration:none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 pull-right sidebar-fixed-right">
    <div class="widget">
        <div class="widget-content widget-content-full">
            <table class="table table-borderless table-striped table-vcenter">
                <tbody>
                    <tr>
                        <td>
                            <a class="nodecoration" href="#">
                                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                                <span class="sidebar-text">Hello There</span>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

动态宽度的简化版。

使用transform:translate(100%, 0);将隐藏完整元素，然后设置right:35px;或您要显示的滑动幻灯片的任何区域/大小。

＆＃13;

＆＃13;

.sidenav {
  background: #ddd;
  display: inline-block;
  padding: 10px;
  position: fixed;
  right:35px;
  top: 70px;
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
  transform:translate(100%, 0);
}

.sidenav:hover {
  right: 0;
  transform:translate(0);
}

.fa {
  vertical-align: middle;
  color: #EF5350;
  padding-right: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="sidenav">
  <i class="fa fa-stack-overflow"></i>
  <span class="sidebar-text">Hello There</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用px代替百分比%值，

＆＃13;

＆＃13;

body {
  overflow: hidden;
}

.sidebar-fixed-right {
  top: 20rem;
  right: -180px;
  position: fixed;
  transition-property: right;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  opacity: 0.8;
}

.sidebar-fixed-right:hover {
  right: 0;
  text-decoration: none;
  opacity: 1.0;
}

.sidebar-text {
  padding-left: 1.2rem;
  text-decoration: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 pull-right sidebar-fixed-right">
  <div class="widget" style="width:20rem">
    <div class="widget-content widget-content-full">
      <table class="table table-borderless table-striped table-vcenter">
        <tbody>
          <tr>
            <td>
              <a class="nodecoration" href="#">
                <i class="fa fa-stack-overflow" style="vertical-align: middle;color: #EF5350;">
                                </i>
                <span class="sidebar-text">Hello There</span>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

响应性问题因使用％而上升。

将其向右移动一定数量。

.sidebar-fixed-right {
    right: -210px;
}

.sidebar-fixed-right:hover {
    right: -70px;
}

这些似乎有效。还要注意放置它的容器。

html, body {
   width: 100%;
   overflow: hidden;
}

Answer 4

有趣......我会尝试这样的事情。

而不是百分比使用像素作为 @CătălinCostan表示。

CSS

body {
  position: relative;
}
i.fa-stack-overflow{
  color:#EF5350;
}

.sidebar-fixed-right{
  position: fixed;
  top:50%;
  transform:translateY(-50%);
  right:-80px;
  transition:all ease 0.5s;
}
.sidebar-fixed-right:hover{
  right:0px;
}

.widget{
  background-color: #efefef;
  padding:5px;
  position: relative;
}

HTML

<div class="container">
<div class="sidebar-fixed-right">
  <div class="widget">
    <div class="widget-content widget-content-full">
      <a class="nodecoration" href="#">
        <i class="fa fa-stack-overflow"></i>
        <span class="sidebar-text">Hello There</span>
      </a>
    </div>
  </div>
</div>
</div>

Link for reference

希望这有助于......

Answer 5

因为你的班级col-md-3它有css：

position:relative

只需将!important添加到您的位置，例如position:fixed!important