如果向下滚动，则向上滑动标题，反之亦然 [英] Slide header up if you scroll down and vice versa

问题描述

更新

我在GitHub上做了一个回购： strong>

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

非常感谢 Sargo Darya 和 Edward J Payton 。

---

如果您向下滚动，则必须创建一个标题，反之亦然。问题是，它会跳转（如果你处于 0-128 之间的 diff -range） p>

我找不出问题出在哪里。任何想法如何让这个工作正常？

这是我迄今为止所做的： http://jsfiddle.net/yckart/rKW3f/

  / /简单的获取当前滚动方向
 // false === down | true === up 
 var scrollDir =（function（oldOffset，lastOffset，oldDir）{
 return function（offset）{
 var dir = offset< oldOffset; 
 if（ dir！== oldDir）lastOffset = offset; 
 oldOffset = offset; 
 oldDir = dir; 
 return {dir：dir，last：lastOffset}; 
}; 
}（））; 
 
 var header = document.querySelector（'header'）; 
 var height = header.clientHeight; 
 addEventListener（'scroll'，function（）{
 var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
 var dir = scrollDir（scrollY）; 
 var diff = dir.last-scrollY; 
 
 var max = Math.max（-height，Math.min（height，diff））; 
 header.style.top =（dir。 dir？max-height：max）+'px'; 
}）; 
  

另一个问题是，如果第一次更改了滚动方向，则什么都不会发生。然而，这可以用一个间隔来解决，否则。

解决方案

我相信这正是你想要的：

  var header = $（'header'），
 headerHeight = header.height（），
 treshold = 0 ，
 lastScroll = 0; 
 
 $（document）.on（'scroll'，function（evt）{
 var newScroll = $（document）.scrollTop（），
 diff = newScroll-lastScroll; 
 
 // normalize treshold range 
 treshold =（treshold + diff> headerHeight）？headerHeight：treshold + diff; 
 treshold =（treshold <0）？0：treshold; 
 
 header.css（'top'，（ -  threshold）+'px'）; 
 
 lastScroll = newScroll; 
}）; 
  

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

Update

I made a repo on GitHub:

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

Big thanks to Sargo Darya and Edward J Payton.

---

I've to create a header which slides up if you scroll down and vice versa. The problem is, that it jumps (if you are in the diff-range between 0-128).

I can not figure out where the problem sits. Any idea how to get this to work correctly?

Here's what I've done so far: http://jsfiddle.net/yckart/rKW3f/

// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset, lastOffset, oldDir) {
    return function (offset) {
        var dir = offset < oldOffset;
        if (dir !== oldDir) lastOffset = offset;
        oldOffset = offset;
        oldDir = dir;
        return {dir: dir, last: lastOffset};
    };
}());

var header = document.querySelector('header');
var height = header.clientHeight;
addEventListener('scroll', function () {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var dir = scrollDir(scrollY);
    var diff = dir.last-scrollY;

    var max = Math.max(-height, Math.min(height, diff));
    header.style.top = (dir.dir ? max-height : max) + 'px';
});

Another problem is, that if the scroll-direction was changed the first time, nothing happens. However, this could be fixed with an interval, or else.

解决方案

I believe this is exactly what you want:

var header = $('header'),
headerHeight = header.height(),
treshold = 0,
lastScroll = 0;

$(document).on('scroll', function (evt) {
    var newScroll = $(document).scrollTop(),
        diff = newScroll-lastScroll;

    // normalize treshold range
    treshold = (treshold+diff>headerHeight) ? headerHeight : treshold+diff;
    treshold = (treshold < 0) ? 0 : treshold;

    header.css('top', (-treshold)+'px');

    lastScroll = newScroll;
});

Demo on: http://jsfiddle.net/yDpeb/

这篇关于如果向下滚动，则向上滑动标题，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！