使用Javascript/jQuery实现滚动时显示按钮的技术求助

嘿，我完全懂你的困扰！作为JS新手，修改代码时怕弄坏原有功能太正常了。咱们一步步来搞定这个需求——让#show按钮默认隐藏，页面滚动到一定位置后再显示，同时保留原本的内容切换逻辑。

步骤1：给按钮添加初始隐藏的CSS #

首先，我们需要让按钮在页面加载时就隐藏起来。在你的CSS里给#show加上初始隐藏的样式：

#show {
  display: none; /* 页面加载时按钮默认隐藏 */
}

/* 保留你原有的其他CSS样式 */
.btn-purple { width: 360px; background: #721a71; color: #fff; padding: 10px; position: fixed; bottom: 0; left: 0; }
#mydiv { position: fixed; bottom: 0; left: 0; width: 360px; }
.myheader { background: #721a71; color: #fff; padding: 10px; }
.mybody { background: #f5f5f5; padding: 10px; }

步骤2：添加滚动监听的JS逻辑，整合原有代码 #

接下来，我们要监听页面的滚动事件，当滚动距离超过设定的阈值时显示按钮，否则隐藏。同时把这段逻辑和你原有的切换代码整合在一起，确保不冲突：

$(document).ready(function() {
  // 原有逻辑：初始隐藏内容区域
  $("#mydiv").hide();

  // 新增：滚动监听逻辑
  $(window).scroll(function() {
    // 这里的200是滚动阈值，你可以根据需求调整（单位：px）
    if ($(window).scrollTop() > 200) {
      $("#show").fadeIn(); // 平滑显示按钮，也可以用show()直接显示
    } else {
      $("#show").fadeOut(); // 平滑隐藏按钮，也可以用hide()直接隐藏
    }
  });

  // 原有点击切换逻辑，保持不变
  $("#show").click(function() {
    $("#mydiv").toggle();
    $("#show").toggle();
  });

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

关键说明 #

• 滚动阈值调整：代码里的200是触发按钮显示的滚动距离，你可以改成100、300或者其他数值，根据你的页面布局来决定什么时候显示按钮最合适。
• 平滑过渡效果：用fadeIn()和fadeOut()是为了让按钮的显示/隐藏更自然，如果你更喜欢直接切换，可以换成show()和hide()。
• 代码整合：所有逻辑都放在$(document).ready()里，确保DOM加载完成后再执行，避免出现找不到元素的错误。

完整的HTML代码（无需修改，保持你原有的即可） #

<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>

这样修改后，按钮会在页面加载时隐藏，当你滚动超过200px时自动显示，点击按钮的原有切换功能也完全不受影响～

内容的提问来源于stack exchange，提问作者JackN