javascript - 悬停效果点击

Question

这基本上是代码的样子，如果粘贴到 sublime 中它应该运行，我想要做的是让 div 在页面加载时显示然后隐藏在滚动上但是当单击按钮时它应该显示您在页面上的任何位置。代码有点粗糙，但它只是一个测试页面

 $(window).scroll(function() {
    
        if ($(this).scrollTop()>0)
         {
            $('.fade').fadeOut();
         }
        else
         {
          $('.fade').fadeIn();
         }
     });
 
 $(function(){
        $(".box").click(function(){
          $(this).find(".fade").fadeIn();
        }
                        ,function(){
                            $(this).find(".fade").fadeOut();
                        }
                       );        
    });
 
 window.onscroll = function()
    {
        var left = document.getElementById("left");
    
    
    
        if (left.scrollTop < 60 || self.pageYOffset < 60) {
            left.style.position = 'fixed';
            left.style.top = '60px';
        } else if (left.scrollTop > 60 || self.pageYOffset > 60) {
            left.style.position = 'absolute';
            left.style.margin-top = '200px';
        }
    
    }

body {
  height: 2000px;    
}
.fade {
  height: 300px;
  width: 300px;
  background-color: #d15757;
  color: #fff;
  padding: 10px;
}
    
    
.box{color: red;}
    
#left{
  float: left;
  width: 20%;
  height: 200px;
  background: yellow;
  position: fixed;
  top: 0;
  left: 150px;
}

<div class="box">
<div class="fade" id="left">
    show div / hide on click (NOT HOVER)
</div>
    
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style="    position: fixed;
        /* margin-right: -40% !important; */
        margin-top: 0%;
        background-color: red;
        color: #fff;
        padding: 10px 10px;
        display: block;
        width: 54%;
        float: right;
        top: 0;">show div again</button></div>
</div>
  
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>

Answer 1

这可行。如果单击框，请检查 .fade 元素是否已经可见。如果是，则隐藏它，如果不是，则显示它。

$(".box").click(function(){
    if($(".fade", this).is(":visible"))
    {
        $(".fade", this).fadeOut();
    }
    else
    {
        $(".fade", this).fadeIn();
    }
});