javascript - Multiple Fixed headings on scroll -
suppose have headings below
<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.
so when scroll heading 1 should fixed on top , scroll down heading 2 should fixed , other headings fixed position must removed.i think possible via jquery.how can ?
i have tried below..
$(window).scroll(function() { if ($(this).scrolltop() ) { //here condition finds if heading tag in screenview. $('.fixontop').css({ 'display': 'fixed' }); } });
here fiddle http://jsfiddle.net/0can8pt9/
check 1 out https://jsfiddle.net/ctjdpe91/1/ think using plugin waypoints such purposes idea
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 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)}) })
Comments
Post a Comment