q - Is there a simple jQuery function to pin and unpin an h1 tag? -
i'm aware of scrollerama , superscrollerama.
i've struggled them both couple days. , can't them function pinning. don't need animations , type support. seek using sample doc , stripping out html content 1 block element @ time , page breaks. seems scrollerama works when entire illustration present. or more likely.... i'm not smart plenty figure out.
all want pin <h1></h1> tag , unpin when specific tag reached.
i've seen question here: css problem pinned header div doesn't seem function @ all.
example code:
<!doctype html> <html> <head> <title>untitled</title> <style type="text/css"> </style> <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> </head> <body> <article> <header></header> <section id="wrap"> <h1> pin when hits window top</h1> <div class="innercontent"> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p class="unpin">unpin previous h1 tag when hits window top</p> </div> <h1> pin when hits window top</h1> <div class="innercontent"> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p class="unpin">unpin previous h1 tag when hits window top</p> </div> <h1>pin when hits window top</h1> <div class="innercontent"> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p>inner content here</p> <p class="unpin">unpin previous h1 tag when hits window top</p> </div> </section> <footer></footer> </article> </body> </html> a link jquery function illustration somewhere exceptionally helpful. or quick explanation of how strip scrollerama downwards pin/upin function help.
additional:sbeliv01 suggested question: how find closest element current position jquery
however method fails when margins have been adjusted (reset html5). works if there's absolutely no margin adjustment on element. , when attempting wrap h1 tags in unstyled div, there's terrible flicker upon page scrolling.
this non-functional, i've set jsfiddle play needed: fiddle here can see things pin fine, fail unpin.
after working bit , using phillip wills' suggestions, i've gotten code settled seems functioning dramatically better.
there no issue if/else statement using before. seems issue simply position utilize in jquery.
functional jquery:
$(function(){ $(window).bind('scroll', function() { $('.info').each(function() { var pin = $(this); var inner = pin.next().position().top - $(window).scrolltop(); var ptop = pin.height() + 20; if (inner < ptop) { pin.addclass('pinned'); } else { pin.removeclass('pinned'); } }); }); }); the main issue finding top of next object, phillip helped , finding top of pinned object bit of additional room scrolling.
functional jsfiddle demo here
jquery q
No comments:
Post a Comment