Question

我正在设置一个“ about”部分，当滚动超过65px时会关闭，而当滚动超过65px时会打开，这是可行的，尽管我想我也可以单击箭头以关闭/显示，无论高度如何。谢谢！

我可以单击打开/关闭该部分，然后对滚动条进行相同操作，但是不能同时执行这两个操作

let toggleAboutStatus = false;
window.onscroll = function() {
  toggleAbout()
}
let toggleAbout = function() {

  let getAboutP = document.querySelector(".about p");
  let getAboutIcon = document.querySelector(".btn-toggle-about");

  if (document.body.scrollTop > 65 || document.documentElement.scrollTop > 65) {
    getAboutIcon.style.backgroundPosition = "center bottom";
    getAboutIcon.style.transform = "rotateZ(0deg)"
    getAboutP.style.display = "none";

    toggleAboutStatus = true;
  } else if (toggleAboutStatus === true) {
    getAboutIcon.style.backgroundPosition = "center top";
    getAboutIcon.style.transform = "rotateZ(180deg)";
    getAboutP.style.display = "block";

    toggleAboutStatus = false;
  }
}

.about {
  display: block;
  text-align: center;
  width: 100%;
  color: black;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  background-image: linear-gradient(to bottom, rgba(65, 60, 60, 0.021), rgba(65, 60, 60, 0.466));
}

.about p {
  margin: 10px 20px 0px;
  display: block;
}

.btn-toggle-about {
  height: 25px;
  background-image: url(img/icons/arrow-icon.png);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center top;
  transform: rotateZ(180deg);
  cursor: pointer;
  transition: 0.2s ease;
}

.pageup {
  height: 100px;
}

.pagedown {
  height: 1000px;
}

<div class="pageup"></div>

<section class="about">
  <p>Welcome to our website! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, alias!</p>
  <div class="btn-toggle-about" onclick="toggleAbout()"></div>
</section>

<div class="pagedown"></div>

因此，总的来说，我希望函数'toggleAbout'在滚动到65以上时不会显示任何内容，但仍然可以单击.btn-toggle-about使其也运行函数'toggleAbout'。

Answer 1

如果我正确理解了您的问题，也许我认为您想要这个。您可以根据需要使用jQuery。并根据需要对其进行修改。

pp           114.04887529788539 ms
pp (py only) 147.0821460010484 ms

$(window).scroll(function() {
  var sticky = $('.about'),
    scroll = $(window).scrollTop();
  if (scroll >= 65) sticky.addClass('hide');
  else sticky.removeClass('hide');
});

$('.btn-toggle-about').click(function() {
  $('.about').toggleClass('hide');
});

.about {
  display: block;
  text-align: center;
  width: 100%;
  color: black;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  background-image: linear-gradient(to bottom, rgba(65, 60, 60, 0.021), rgba(65, 60, 60, 0.466));
}

.about p {
  margin: 10px 20px 0px;
  display: block;
}

.btn-toggle-about {
  height: 25px;
  background-image: url(img/icons/arrow-icon.png);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center top;
  transform: rotateZ(180deg);
  cursor: pointer;
  transition: 0.2s ease;
}

.pageup {
  height: 100px;
}

.pagedown {
  height: 1000px;
}

.about.hide p {
  visibility: hidden;
  opacity: 0;
}

有没有办法在滚动和单击时不显示任何内容？

1 个答案: