【问题标题】:Hide a div when page is still, show on scroll movement up页面静止时隐藏 div,向上滚动时显示
【发布时间】:2013-08-07 09:56:44
【问题描述】:

我想在 android 上的 chrome (?) 上做一个像这样的粘性标题。

即,当您向下滚动页面时,没有粘性标题,但是一旦您向上滚动,(或者说 1 秒后)粘性标题就会再次出现。

然后,当您向下滚动时,它会再次隐藏。

我认为这是一个更好的粘性标题解决方案,但只能找到参考航点的教程,我想要一些基于运动的东西,而不是固定位置。

谁能给我一个简单的例子吗?

太好了,谢谢。

【问题讨论】:

  • 为什么不使用像 Foundation 这样的响应式框架?
  • 我们已经在使用 bootstrap,但是这种类型超出了范围。我发现jsfiddle.net/frZ9j/9 与我们需要的非常相似,只是需要进行以下调整:1. 以隐藏开始 2. 等待向上滚动 100px 以淡入
  • 基础看起来很棒。我只是讨厌学习同一事物的不同版本。

标签: jquery header scroll sticky jquery-scrollable


【解决方案1】:

检查Working Fiddle。我希望这是你需要的..

var scroll_pos = 50;
var scroll_time;
if($('.gridContainer').is(':visible'))
 $('.gridContainer').addClass('hidden');  
$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

if (current_scroll >= $('#topNav').outerHeight()) {
    if (current_scroll <= scroll_pos + 100) {
        $('.gridContainer').removeClass('hidden');    
    }
    else {
        $('.gridContainer').addClass('hidden');  
    }
}

scroll_time = setTimeout(function() {
    scroll_pos = $(window).scrollTop();
}, 600);

});

【讨论】:

  • 谢谢,但不完全是。 1. 导航默认是隐藏的,直到用户向上滚动才会激活。 2. nav 然后显示 5 秒并淡出,除非用户再次向上滚动,在这种情况下,计时器被重置并且 5 秒倒计时再次开始。 3.当窗口显示页面顶部100px时,nav默认再次隐藏。在您的版本中,自动淡出似乎根本不起作用....
猜你喜欢
  • 1970-01-01
  • 2021-06-04
  • 1970-01-01
  • 2020-12-02
  • 2010-10-15
  • 1970-01-01
  • 2014-05-26
  • 2016-01-17
相关资源
最近更新 更多