Div 在页面底部时不出现答案

【问题标题】：Div doesn't appear when at the bottom of a pageDiv 在页面底部时不出现
【发布时间】：2020-12-27 12:47:03
【问题描述】：

我有一个关于 javascript 的问题。我正在创建一个面板，当滚动时，面板关闭，当我们位于页面底部时，#toTop div 将出现。

我做了如下功能代码。但是当我们在页面底部时，#toTop div 还没有出现。

到达底部页面时显示 #toTop div 的函数

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
        openMenu();
  } else if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
        $("#toTop").css("display","block");
  } else{
        closeMenu();
        $("#toTop").css("display","none");
  }
 });
});

我的代码有什么遗漏或错误吗？请帮我。这是My Codepen

面板 HTML

<div id="floatingPanel">
   <div class="panel-socmed open">
      <a href="#" class="instagram">
         <i class="fab fa-instagram"></i>
      </a>
      <a href="#" class="facebook">
         <i class="fab fa-facebook-f"></i>
      </a>
      <a href="#" class="twitter">
         <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="youtube">
         <i class="fab fa-youtube"></i>
      </a>
      <a href="#" class="linkedin">
         <i class="fab fa-linkedin-in"></i>
      </a>
   </div>
   <div id="closeShare">
       <i class="fas fa-times"></i>
       <i class="fas fa-share-alt"></i>
   </div>
  <div id="toTop">
    <i class="fas fa-chevron-up"></i>
  </div>
</div>

功能打开/关闭面板

function toggleMenu() {
   if ($(".panel-socmed").hasClass("open")) {
       openMenu();
   } else {
       closeMenu();
  }
}

function openMenu() {
  $(".panel-socmed").removeClass("open");
  $("#closeShare").find(".fa-times").hide();
  $("#closeShare").find(".fa-share-alt").show();
}

function closeMenu() {
  $(".panel-socmed").addClass("open");
  $("#closeShare").find(".fa-times").show();
  $("#closeShare").find(".fa-share-alt").hide();
}

$(document).ready(function() {
   $('#closeShare').click(function() {
      toggleMenu();
});

【问题讨论】：

我认为 $(this).scrollTop() > 0 应该是 $(this).scrollTop()
$(this).scrollTop() > 0 打开面板，而不是 #toTop。在页面底部显示 #toTop 的逻辑是这个 => $("body").height() <= ($(window).height() + $(window).scrollTop()) @firatozcevahir
是的，但是当用户向下滚动时，它总是会碰到 if 语句的第一个 case，因为 $(this).scrollTop() 总是大于 0
我尝试在 if 下做一个 if，它起作用了。像这样。代码有多简单？ => if ($("body").height() <= ($(window).height() + $(window).scrollTop())){ $("#toTop").css("display","block"); } else { $("#toTop").css("display","none"); } });
您希望Totop div 在页面末尾隐藏 - 仅此而已？

标签： javascript jquery panel

【解决方案1】：

假设您想显示#toTop 并仅在滚动到底部时关闭面板，您滚动功能的微小更改将修复它。

  $(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
        openMenu();
  }  if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
        $("#toTop").css("display","block");
  } else{
        closeMenu();
        $("#toTop").css("display","none");
  }
 });
});

【讨论】：

当滚动到底部时，只是面板关闭。但是当它位于页面底部时，会出现#toTop。 @RitSar
刚刚注意到 Piyush 做了同样的事情，但它被编辑了，这不是你需要的吗？

【解决方案2】：

下面的脚本应该做你需要的：

$(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
          openMenu();
       } else{
          closeMenu();
       }
    
     if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
       $("#toTop").css("display","block");
     } else {
       $("#toTop").css("display","none");
     }
   });

正如@firatozcevahir 也提到的，$(this).scrollTop() > 0 它会评估为 true，因此下一个 else 部分永远不会被执行。

【讨论】：

它不起作用。我尝试使用此代码，并且可以正常工作。 if if ($(this).scrollTop() > 0) { openMenu(); $("#toTop").css("display","block"); } else{ closeMenu(); $("#toTop").css("display","none"); } 下面的 if。这是代码 => if ($("body").height() <= ($(window).height() + $(window).scrollTop())){ $("#toTop").css("display","block"); } else { $("#toTop").css("display","none"); } });
太好了，不确定您到底想要什么