左侧屏幕滑块上的固定按钮

Question

如何在网站左侧实现按钮，当您单击它时，它将向右滑动一个小框以显示内容。另外，向下或向上滚动时，它将停留在屏幕的左侧中间

Answer 1

您可以使用slideToggle()或使用visibility

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

.button{
      background-color : #31B0D5;
      color: white;
      padding: 10px 20px;
      border-radius: 4px;
      border-color: #46b8da;
      float:left;
    }
.content{
      float:right;
      display:block;
    } 

    #mybutton {
      position: fixed;
      left: 10px;
    }

<div id="mybutton">
    <button class="button"  onclick="toggle_visibility('content');">Click here to show content</button>
</div>
<div class="content">
     <div id="content">This is content</div>
</div>

或

$(function()
{
     $("input#toggle").click(function()
     {
         $("#contact").slideToggle();
         return false;
     }); 
});

#contact
{
    display: none;
    background: grey;
    color: #FFF;
    padding: 10px;
    float:right;
}
#button
{
 float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
    <input type="button" id="toggle" value="Show Content"/>
</div>
<div id="contact">
    This is content!
</div>