Javascript停止跳跃滚动

时间:2014-07-29 16:05:02

标签: javascript jquery scroll

我有一个页面,您可以点击该页面从页面顶部向下拉一个元素。

我正在尝试创建一条规则,说明如果下推是可见的并且屏幕滚动的位置超过了下推的高度,那么它应该再次隐藏。这意味着用户必须按下按钮才能再次显示它。

在我的HTML中,我有:

<div class="row" id="learn-more" style="display:none">
  <div class="small-12 columns" id="close">
    <p id="close-learn">
      <i class="fa fa-times pull-right fa-2x"></i>
    </p>
  </div>
  <div class="small-12 columns" id="learn-content">
    <h1>Content for Pushdown</h1>
  </div>
</div>

<div class="row" id="hero">
  <div class="small-12 columns small-centered">
    <p id="learn"><a class="transition">Learn More</a></p>
  </div>
</div>

在我的Javascript中我有:

  // Open and close learn more section
  $("#learn").on("click", function() {
    $("#learn-more").slideDown();
  });

  $("#close-learn").on("click", function() {
    $("#learn-more").slideUp();
  });

  // Close learn-more based on scroll position
  $(window).on("scroll", function() {

    var scrollPosition = $(window).scrollTop();

    if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
      $("#learn-more").slideUp()
    } 
  });

这一切都有效,但当#learn-more元素向上滑动时,页面会向下跳跃约500个像素,这是#learn-more元素的高度。当我点击“工作原理”按钮然后在下推元素下方滚动时,我希望我的工作方式与Airbnb's new homepage相同。

非常感谢任何建议。

1 个答案:

答案 0 :(得分:1)

似乎发生这种情况是因为在调用slideUp()之后保留$(window).scrollTop位置。 但是我们可以记住相对于窗口顶部的“学习更多”按钮的可见位置,并且在隐藏文本块后返回到此位置。另外,我建议在这里使用hide()而不是slideUp()。

以下是我建议滚动的内容:

 $(window).on("scroll", function(event) {
      var scrollPosition = $(window).scrollTop();
      var learnMore = $("#learn-more");
      if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
             var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
             learnMore.hide();
             $(window).scrollTop(learnMoreButtonTop);
        } 
  });

Working example