javascript - 悬停效果点击

这里基本上是代码的样子，如果粘贴到高位，它应该运行，我想做的是让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'>

最佳答案

这可能有效。如果单击了框，请检查.fade元素是否已经可见。如果是，则将其隐藏，否则，将其显示。

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

关于javascript - 悬停效果点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42757541/