Append strapline on scroll
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want a strapline to fade in under my title ('alice is') after the user scrolls a certain distance down the page.

The title is fixed position.
Here's it on page load: http://cavill.me/KDTR
Here's it after a bit of scrolling: http://cavill.me/KDlp

The strapline should be appended after the user has scrolled down, say, 200px (exact amount to be altered as I see fit), and fade out when returned to the top. Using the inspector, here's how it'd roughly look: http://cavill.me/KDd4

Crowdsource coding tasks.

2 Solutions


You want to use https://github.com/sxalexander/jquery-scrollspy.

Add to your <h1> a <span style="display: none">a chef & illustrator in london</span> then:

<script type="text/javascript" src="https://github.com/sxalexander/jquery-scrollspy/raw/master/jquery-scrollspy.js"></script>
<script type="text/javascript">
jQuery(function ($) {
  var $title = $("h1"),
    $subtitle = $("<span hidden>a chef &amp; illustrator in london</span>").appendTo($title);
  $title.scrollspy({
    min: 200,
    onEnter: function () {
      $subtitle.fadeIn();
    },  
    onLeave: function() {
      $subtitle.fadeOut();
    }   
  }); 
}); 
</script>

Of course this could be improved with more semantic classes, etc, as needed, but this will work. You could also fade the subtitle using CSS transitions which would be preferable.


You will need to add this to your <h1> site title

<span class="strapline" style="display: none;">a chef &amp; illustrator in london</span>

http://jsfiddle.net/9CfTv/4/

You can then just change the showPosition value to be what ever you need.

Lovely, simple solution that was a doddle to implement. Many thanks.
cavill 9 years ago
View Timeline