javascript - 滚动功能不会产生平滑过渡

Question

我有 1 个固定的 DIV #scroll-up，它是浏览器窗口高度的 100%。我在它下面还有另一个 DIV #next-prev。 #next-prev 出现后，我希望 #scroll-up DIV 开始向上滚动。我的代码 blow 就是这样做的，但是一旦 #next-prev 出现在 View 中，#scroll-up 就会无缘无故地跳起来。效果应该是无缝的。

如何防止跳转？

我已经在 jsFiddle 上设置了这个问题的演示:http://jsfiddle.net/sya0jr6p/1/

---

JS

使用 jQuery Visible plugin检测何时出现#next-prev。

$(window).scroll(function() {

    if ($('#next-prev').visible(true)) {
        console.log ( '#next-prev visible' );

        // Initiate scroll up of '#scroll-up' when '#next-prev' is in the viewport
        var $tagline = $('#scroll-up');
        var windowScroll;

        // Function
        function slidingTitle() {

            //Get scroll position of window
            windowScroll = $(this).scrollTop();

            $tagline.css({
                'top' : -(windowScroll/3)+"px"
            });

        }
        // Initiate
        slidingTitle();

    } else {
        console.log ( '#next-prev not visible' );
         // The element is NOT visible, do something else

    }

});

更新

经过进一步测试，只有当 #nav-wrap 不在屏幕上时，跳转才会存在。如果它在屏幕上，则不会发生跳转并按预期工作。

我注意到的另一件事；当您第一次加载页面时，#nav-wrap 还没有出现在屏幕上。像往常一样向下滚动页面，直到您看到 #scroll-up 跳起来，如果您继续向下滚动，您就会看到我想要发生的事情。 #scroll-up 正常滚动。但是，如果在跳转发生后，您将页面向上滚动到最顶部，您会注意到 #scroll-up 的位置与您第一次加载页面时的位置不同。莫非计算错了？或者代码的顺序可能是错误的？只是一些想法...

更新

这是我希望滚动如何工作的动画 GIF，给出的动画答案并不直观:

Answer 1

您看到跳转的原因是，一旦 #next-prev 进入 View ，您只需将当前窗口滚动位置除以 3，并将其设置为 #scroll 的最高值-up...当您到达#next-prev 时窗口滚动将大于 0，因此滚动除以 3 也将大于 0，并且 #向上滚动 将立即获得(大)负 top 值。

我不知道你从哪里得到除以三的除法 - 这会导致元素滚动变慢(又名。视差效果) - 这意味着即使没有跳跃和 #scroll-up 在正确的位置开始滚动，它仍然会覆盖三分之二的 #next-prev 一旦 #next-prev 完全可见......所以我不认为你真的想要视差效果......

我想你想要的是:#scroll-up的top值需要为零，直到#next-prev的第一个像素滚动到 View 中，然后逐渐增长当 #next-prev 进入“更多” View 时，确保它恰好位于 #next-prev 之上...即。 #scroll-up 的顶部需要为 0 减去像素数如果 #next-prev 仍然完全低于视口(viewport)。

这是实现该目标的方法...

(function($) {
  $(window).scroll(function() {
    //Get the footer position relative to the document
    var footer_offset = $("#footer").position().top;
    //Get the window height (viewport height)
    var window_height = $(window).height();
    //Get the current scroll position
    var window_scroll = $(window).scrollTop();
    //Calculate the bottom of the window relative to the document
    var window_bottom_offset = window_scroll + window_height;
    //Calculate "how much" of the footer is above the bottom of the window
    var footer_visible_pixels = window_bottom_offset - footer_offset;
    //Default #semistuck's position to top: 0px
    var semistuck_top = 0;
    //But if the footer is above the bottom of the screen...
    if (footer_visible_pixels > 0) {
      //...move #semistuck up by the same amount of pixels
      semistuck_top = -footer_visible_pixels;
    }
    //Actually move it
    $("#semistuck").css('top', semistuck_top + 'px');
    //Just to see each step of the calculation
    console.log(footer_offset, window_height, window_scroll, window_bottom_offset, footer_visible_pixels, semistuck_top);
  });
}(jQuery));

body,
html {
  margin: 0;
}
#semistuck,
#loooooong,
#footer {
  margin: 0;
  padding: 4em 1em;
  text-align: center;
  box-sizing: border-box;
}
#semistuck {
  position: fixed;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: #afa;
}
#loooooong {
  height: 2000px;
  margin-left: 50%;
  width: 50%;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 100px, #465298 100px, #465298 200px);
}
#footer {
  background: #faa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="semistuck">
  This is stuck until the<br>footer scrolls into view
</div>
<div id="loooooong"></div>
<div id="footer">
  When this gets into<br>view #semistuck will<br>get out of its way
</div>

显然上面的代码比需要的更冗长，但我觉得计算中非常小的增量使发生的事情更清楚......

下面是相同内容的简化形式:

var footer_visible_pixels = $(window).scrollTop() + $(window).height() - $("#footer").position().top;
$("#semistuck").css('top', (footer_visible_pixels > 0 ? -footer_visible_pixels : 0) + 'px');

嗯...

...想想看，您实际上可能想要视差效果，但只是希望页脚位于顶部，所以这里有一个稍微修改过的版本，它提供了一些很酷的效果:

(function($) {
  $(window).scroll(function() {
    //Get the footer position relative to the document
    var footer_offset = $("#footer").position().top;
    //Get the window height (viewport height)
    var window_height = $(window).height();
    //Get the current scroll position
    var window_scroll = $(window).scrollTop();
    //Calculate the bottom of the window relative to the document
    var window_bottom_offset = window_scroll + window_height;
    //Calculate "how much" of the footer is above the bottom of the window
    var footer_visible_pixels = window_bottom_offset - footer_offset;
    //Default #semistuck's position to top: 0px
    var semistuck_top = 0;
    //But if the footer is above the bottom of the screen...
    if (footer_visible_pixels > 0) {
      //...move #semistuck up by the same amount of pixels
      semistuck_top = -footer_visible_pixels/3;
    }
    //Actually move it
    $("#semistuck").css('top', semistuck_top + 'px');
    //Just to see each step of the calculation
    console.log(footer_offset, window_height, window_scroll, window_bottom_offset, footer_visible_pixels, semistuck_top);
  });
}(jQuery));

body,
html {
  margin: 0;
}
#semistuck,
#loooooong,
#footer {
  margin: 0;
  padding: 4em 1em;
  text-align: center;
  box-sizing: border-box;
}
#semistuck {
  position: fixed;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: #afa;
}
#loooooong {
  height: 2000px;
  margin-left: 50%;
  width: 50%;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 100px, #465298 100px, #465298 200px);
}
#footer {
  background: #faa;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="semistuck">
  This is stuck until the<br>footer scrolls into view
</div>
<div id="loooooong"></div>
<div id="footer">
  When this gets into<br>view #semistuck will<br>get out of its way
</div>

与原来的建议相比，只有两件事发生了变化:

1. 我在页脚添加了 position: relative
2. 我将 #semistuck 的负 top 除以三

注意事项

这些都不适用于 iPhone、iPad 以及可能大多数其他触摸设备。它们不会在 滚动期间触发任何滚动事件，而只会在 之后触发。因此，如果对移动设备的支持是一个问题，您应该检测到这些并提供回退 - 替代方案是仅在滚动结束后才会发生的非常跳跃的效果。据我所知，没有解决方法，根据具体情况，处理它的最佳方法可能是:

1. 降级为更简单的东西
2. 使用其他答案中提供的动画解决方案之一 - 但仅限于不支持连续滚动事件的设备