Solution Timeline

All versions (edits) of solutions to Append strapline on scroll appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

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.show();
    },  
    onLeave: function() {
      $subtitle.hide();
    }   
  }); 
}); 
</script>

Of course this could be improved with more semantic classes, etc, as needed, but this will work.

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/2/

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

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/3/

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

Winning solution

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.