粘滞标题 - 滚动 - CSS / jQuery [英] Sticky Header - Scroll - CSS / jQuery

问题描述

我希望创建一个粘性标题。每当用户向下滚动并且原始标题消失，那么粘性标题就应该引入。

I wish to create a sticky header. Everytime that the user scrolls down AND the original header goes away, then the "sticky" header should kick in.

我目前使用这个：

I currently use this:

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

尽管当前用户只是在滚动时添加sticky类，而不是当原始标题应该消失。

Although, the current one add the class "sticky" whenever a user just does a scroll, and not when the original header should be gone.

问候

Regards

推荐答案

换行他用 div 与 id =whateveryouwannacallit

并设置：

and set:

#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}

这篇关于粘滞标题 - 滚动 - CSS / jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！