Question

我有一组带有段落的文章。我试图让每篇文章的每个标题/标题在用户滚动到该文章时都有一个固定的位置，而不使用视口插件。

这就是我正在使用的：

$(window).scroll(function() {

    var winTop = $(this).scrollTop();
    var $divs = $('div');

    var top = $.grep($divs, function(item) {
        return $(item).position().top <= winTop;
    });

    $divs.removeClass('active');
    $(top).addClass('active');

});

在我的例子中，每个标题在通过它时都会得到固定位置，并且我最终会将所有标题都固定在位置上。

小提琴：http://jsfiddle.net/C2SWa/

Answer 1

这是我很久以前在学习jQuery时发现的代码。

<强> HTML：

<div id="header1" class="header fixed">
    <h2>Header1</h2>
</div>
<div id="header1_content">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div id="header2" class="header relative">
    <h2>Header2</h2>
</div>
<div id="header2_content">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div id="header3" class="header relative">
    <h2>Header3</h2>
</div>
<div id="header3_content">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<强> CSS：

p {
    background-color:#F0F0F0;
}

.header {
    background-color:#CCC;
    width:100%;
    top:0;
    left:0;
}

.header h2 {
    margin:20px;
}

.fixed {
    position:fixed;
}

.relative {
    position:static;
}

#header1_content {
    margin-top:80px;
}

<强> jQuery的：

$(function(){
    var lastScrollTop = 0;
    $(window).scroll(function(event){
       var currentScrollTop = $(this).scrollTop();
       if (currentScrollTop > lastScrollTop){

            // Scrolling down
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _next_header = $(this).nextUntil('.header').next('.header');
                    if($(_next_header).length > 0)
                    {
                        if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top)
                        {
                            // Bottom of header hit top of next header
                            $(this).removeClass('fixed').addClass('relative');
                            $(_next_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        } 
        else 
        {
            // Scrolling up
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _prev_header = $(this).prevUntil('.header').prev('.header');
                    if($(_prev_header ).length > 0)
                    {
                        if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height()))
                        {
                            // Top of header hit bottom of previous content box
                            $(this).removeClass('fixed').addClass('relative');
                            $(_prev_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        }
        lastScrollTop = currentScrollTop;
    });
});

的 Working Demo

Answer 2

使用这个jQuery插件会更容易：jQuery.stickysectionheaders

jQuery：使用视口修复段落位置的每个标题

小提琴：http://jsfiddle.net/C2SWa/

2 个答案: