Question

社区:)。我正在尝试隐藏或显示标题DIV，具体取决于用户向下滚动（隐藏标题）或向上滚动（显示标题）。我基本上试图实现这个结果：http://codepen.io/AdobeWordPress/pen/tigrx

到目前为止，我能够得到的最接近的代码是：

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= 0) {
        if (current_scroll <= scroll_pos) {
            $('.cs_mega_menu').slideDown('230');
        }
        else {
            $('.cs_mega_menu').slideUp('230');
        }
    }

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

但是，问题是效果不准确（每次都没有正确响应）并且动画不流畅。

当我尝试使用codepen示例中的代码时，无论我做什么，我的网站都会变成空白：/。如果你可以帮我转录它以便它可以在我的网站上使用，我会非常感激。

Answer 1

请检查：http://imakewebthings.com/jquery-waypoints/

示例：

$('#element_after_header').waypoint(function(direction){
     if(direction=='up'){
       $('header').show();
     }else{
       $('header').hide();
     }
}

Answer 2

不需要计时器来达到效果。你可以试试这个......

$(window).scroll(function() {
    var header_height = 200;
    var current_scroll = $(window).scrollTop();

    if (current_scroll > header_height) {
            $('.cs_mega_menu').slideUp(1000); 
    }
    else{
            $('.cs_mega_menu').slideDown(1000);
    }
});

Answer 3

非常感谢您的支持。我在stackoverflow中找到了一个完全符合我要求的代码：

    $(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if(Math.abs(lastScrollTop - st) <= delta)
          return;
       if (st > lastScrollTop){
           // downscroll code
           $('.cs_mega_menu').slideUp('230');
       } else {
          // upscroll code
          $('.cs_mega_menu').slideDown('230');
       }
       lastScrollTop = st;
    });
});

现在我只是努力让它出现在悬停中，但这是一个不同的故事。

将标题隐藏/显示为滚动功能

3 个答案: