Javascript 滚动条上的多个固定标题

假设我有如下标题

<h1 class="fixontop">heading 1</h1>
content goes here.
.
.
.
long paragraph.
<h1 class="fixontop">heading 2</h1>
2nd content goes here.
.
.
.
long paragraph.
<h1 class="fixontop">heading 3</h1>
3nd content goes here.
.
.
.
long paragraph.

这是小提琴

看看这个 我认为使用类似插件的航路点来达到这样的目的是一个好主意

var scrollTimeout;
var breakpoints = [];

function fix_heading(heading){
    if( heading.hasClass('heading-fixed'))
        return 

    heading
        .addClass('heading-fixed')
         // prevent content jumping
        .parents('section').css('padding-top', heading.height())
}

function unfix_heading(heading){
    if(! heading.hasClass('heading-fixed'))
        return

    heading
        .removeClass('heading-fixed')
        .parents('section').css('padding-top', 0);    
}

function fix_headings(breakpoints){
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){
        $(breakpoints).each(function(){
            var breakpoint = this;
            var breakpoint_heading = $('.fixontop[data-fix-on='+breakpoint+']')

            if(document.body.scrollTop > breakpoint ){
                fix_heading(breakpoint_heading)
            }

            if(document.body.scrollTop < ( breakpoint )){
                unfix_heading(breakpoint_heading)
            }

            //scrolled out of parent container
            if(document.body.scrollTop > (breakpoint + breakpoint_heading.parents('section').outerHeight())){
                unfix_heading(breakpoint_heading)   
            }

         })
     }, 30) //timeout here for better performance
}

$(function(){
    //setup breakpoints
    $('.fixontop').each(function(){
        breakpoints.push ($(this).position().top)
        $(this).attr('data-fix-on', $(this).position().top)
    })
    $(document).scroll(function(){fix_headings(breakpoints)})
})

var滚动超时；
var断点=[]；
函数固定单元标题（标题）{
if（heading.hasClass（'heading-fixed'））
返回
标题
.addClass（'heading-fixed'）
//防止内容跳转
.parents（'section'）.css（'padding-top'，heading.height（））
}
功能取消固定标题（标题）{
如果（！heading.hasClass（'heading-fixed'））
返回
标题
.removeClass（'heading-fixed'）
.parents（'section'）.css（'padding-top'，0）；
}
函数修复标题（断点）{
clearTimeout（滚动超时）；
scrollTimeout=setTimeout（函数（）{
$（断点）。每个（函数（）{
var断点=这个；
var breakpoint_heading=$（'.fixontop[data fix on='+breakpoint+']））
if（document.body.scrollTop>断点）{
修复标题（断点标题）
}
if（document.body.scrollTop<（断点））{
取消固定标题（断点标题）
}
//从父容器中滚出
if（document.body.scrollTop>（断点+断点\u heading.parents（'section'）.outerHeight（））{
取消固定标题（断点标题）
}
})
}，30）//此处超时以获得更好的性能
}
$（函数（）{
//设置断点
$（'.fixontop'）。每个（函数（）{
breakpoints.push（$（this.position（）.top）
$（this.attr（'data-fix-on'，$（this.position（）.top））
})
$（文档）.scroll（函数（）{fix_标题（断点）}）
})

尝试使用

.each（）

以每个元素的

.fixontop

类为目标。可能的重复项

var scrollTimeout;
var breakpoints = [];

function fix_heading(heading){
    if( heading.hasClass('heading-fixed'))
        return 

    heading
        .addClass('heading-fixed')
         // prevent content jumping
        .parents('section').css('padding-top', heading.height())
}

function unfix_heading(heading){
    if(! heading.hasClass('heading-fixed'))
        return

    heading
        .removeClass('heading-fixed')
        .parents('section').css('padding-top', 0);    
}

function fix_headings(breakpoints){
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function(){
        $(breakpoints).each(function(){
            var breakpoint = this;
            var breakpoint_heading = $('.fixontop[data-fix-on='+breakpoint+']')

            if(document.body.scrollTop > breakpoint ){
                fix_heading(breakpoint_heading)
            }

            if(document.body.scrollTop < ( breakpoint )){
                unfix_heading(breakpoint_heading)
            }

            //scrolled out of parent container
            if(document.body.scrollTop > (breakpoint + breakpoint_heading.parents('section').outerHeight())){
                unfix_heading(breakpoint_heading)   
            }

         })
     }, 30) //timeout here for better performance
}

$(function(){
    //setup breakpoints
    $('.fixontop').each(function(){
        breakpoints.push ($(this).position().top)
        $(this).attr('data-fix-on', $(this).position().top)
    })
    $(document).scroll(function(){fix_headings(breakpoints)})
})