javascript – 如果向下滚动,请向上滑动标题,反之亦然

前端之家收集整理的这篇文章主要介绍了javascript – 如果向下滚动,请向上滑动标题,反之亦然前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

更新

我在GitHub上做了一个回购:

https://github.com/yckart/Veil.js

非常感谢Sargo DaryaEdward J Payton.

我要创建一个标题,如果向下滚动则向上滑动,反之亦然.问题是,它会跳跃(如果你处于0-128之间的差异范围内).

我无法弄清问题所在.知道如何让它正常工作吗?

这是我到目前为止所做的:http://jsfiddle.net/yckart/rKW3f/

  1. // something simple to get the current scroll direction
  2. // false === down | true === up
  3. var scrollDir = (function (oldOffset,lastOffset,oldDir) {
  4. return function (offset) {
  5. var dir = offset < oldOffset;
  6. if (dir !== oldDir) lastOffset = offset;
  7. oldOffset = offset;
  8. oldDir = dir;
  9. return {dir: dir,last: lastOffset};
  10. };
  11. }());
  12. var header = document.querySelector('header');
  13. var height = header.clientHeight;
  14. addEventListener('scroll',function () {
  15. var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  16. var dir = scrollDir(scrollY);
  17. var diff = dir.last-scrollY;
  18. var max = Math.max(-height,Math.min(height,diff));
  19. header.style.top = (dir.dir ? max-height : max) + 'px';
  20. });

另一个问题是,如果第一次改变滚动方向,则没有任何反应.但是,这可以用间隔来修复,否则.

最佳答案
我相信这正是你想要的:

  1. var header = $('header'),headerHeight = header.height(),treshold = 0,lastScroll = 0;
  2. $(document).on('scroll',function (evt) {
  3. var newScroll = $(document).scrollTop(),diff = newScroll-lastScroll;
  4. // normalize treshold range
  5. treshold = (treshold+diff>headerHeight) ? headerHeight : treshold+diff;
  6. treshold = (treshold < 0) ? 0 : treshold;
  7. header.css('top',(-treshold)+'px');
  8. lastScroll = newScroll;
  9. });

演示:http://jsfiddle.net/yDpeb/

猜你在找的jQuery相关文章