滚动显示多个固定标题

debugcn 发表于 Dev

毗湿奴

假设我的标题如下

<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.

所以当我滚动标题1应该固定在顶部并且向下滚动标题2应该固定并且所有其他标题固定位置都必须删除时。我认为这只能通过jquery来实现。我该怎么办？

我在下面尝试过..

 $(window).scroll(function() {
    if ($(this).scrollTop() ) { //Here some condition which finds if the heading tag is in screenview.  
        $('.fixontop').css({
            'display': 'fixed'
        });
    }
});

这是小提琴http://jsfiddle.net/0can8pt9/

罗伯特·伊萨夫（Robert Isaev）

检查一下这个https://jsfiddle.net/ctjdpe91/1/我认为使用类似Waypoint之类的插件来实现此目的是一个好主意

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)})
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。