javascript - 使用 Javascript/jQuery 使按钮出现在滚动条上

Question

该按钮已经有 Javascript，这就是我将其包含在下面的原因 - 虽然这段代码与我的问题是分开的。这是为了在单击时将按钮更改为其他内容 - 我想隐藏按钮，直到滚动...环顾四周，我无法找到正确的方法。 (对 JS 很陌生).. 每当我摆弄代码时，它就会破坏 JS，这就是我寻求帮助的原因.. 将不胜感激。

$(document).ready(function() {
  $("#mydiv").hide();
  $("#show").click(function() {
    $("#mydiv").toggle();
    $("#show").toggle();
  });
  $("#hide").click(function() {
    $("#mydiv").hide();
    $("#show").show();
  });
});

#mydiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 360px;
}

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}

.myheader {
  background: #721a71;
  color: #fff;
  padding: 10px;
}

.mybody {
  background: #f5f5f5;
  padding: 10px;
}

<div class="btn btn-purple" id="show">
  Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>

<div id="mydiv">
  <div class="myheader text-center">
    Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
  </div>

  <div class="mybody">
    <p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
    <p class="d-none d-md-block">Email: <a class="external" href="#">example@example.co.uk</a></p>
    <p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
  </div>
</div>

Answer 1

如果你想在滚动 Jquery Scroll 上显示你的 div，你需要将滚动功能附加到窗口。如果您不熟悉 javascript，那么最简单的方法就是添加一个类并使用 css 控制其他所有内容。所以你可以做类似下面的事情:

$(window).scroll(function(){
    $('#show').addClass('scrolled', $(this).scrollTop() > 100);
});

这将在窗口达到 100px 时添加 scrolled 类。如果您希望它在恢复时也删除类，而不是使用 addCLass，您只需将其切换为 toggleClass，它也会将其删除。

这里是:

$(document).ready(function() {
  $("#mydiv").hide();
  $("#show").click(function() {
    $("#mydiv").toggle();
    $("#show").toggle();
  });
  $("#hide").click(function() {
    $("#mydiv").hide();
    $("#show").show();
  });
});
$(window).scroll(function(){
	$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});

body{
  height:300vh;
}
#mydiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 360px;
}

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  opacity:0;
  transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
  opacity:1;
}
.myheader {
  background: #721a71;
  color: #fff;
  padding: 10px;
}

.mybody {
  background: #f5f5f5;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
  Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>

<div id="mydiv">
  <div class="myheader text-center">
    Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
  </div>

  <div class="mybody">
    <p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
    <p class="d-none d-md-block">Email: <a class="external" href="#">example@example.co.uk</a></p>
    <p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
    <p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
  </div>
</div>

如果您不想要过渡效果，您可以只使用显示属性并从 css 中删除不透明度和过渡效果，如下所示:

.btn-purple {
  width: 360px;
  background: #721a71;
  color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  display:none;
}
.btn-purple.scrolled{
  display:block;
}