Question

当用户向下滚动时，我试图以一种不错的方式隐藏wordpress网站的标题。当它们向下滚动100像素时，它已经可以使用了，但是它非常跳跃，因此用户不会最终到达标题后的部分顶部。

我的jquery代码是这样的：

jQuery(function() {
var header = jQuery(".site-header");
jQuery(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();

    if (scroll >= 100) {
         header.addClass("hidden-header");
    } else {

    }
});
});

我的CSS是：

.site-header{
background-color: #FFF;
transition: all 1s ease;
}

.hidden-header{
visibility: hidden!important;
height: 0!important;
}

上面的方法确实有效，但是笨拙。有一个更好的方法吗？我要隐藏的部分是全高图像滑块，我不希望它返回，它应该保持隐藏状态，直到重新加载页面为止。

提前谢谢！克雷格

Answer 1

尝试一下。我不确定高度是否会正确淡出。

这里有一个符合您需求的示例：https://jsfiddle.net/00Lodcqf/434

 jQuery(function() {
    var header = jQuery(".site-header");
    jQuery(window).scroll(function() {    
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 100) {
             header.fadeOut();
        } else {
             header.fadeIn();
        }
    });

});

当用户滚动到某个元素时隐藏标题

1 个答案: