If you're looking for a starting point for the desired feature, here's a simple basis that may help. The code should be fairly self-explanatory, but feel free to ask if you have any questions about its implementation.
It's important to be mindful of throttling the scroll event handling to prevent potential performance issues in your application.
For more information on throttling events, check out this resource. Additionally, you can read about the potential problems that may arise if throttling is not implemented.
Here is an updated version of your original fiddle with the solution implemented: link. Below is an overview of the content in the fiddle.
Script
$(document).ready(function() {
var imageHeight, scrollTopThreshold;
var heading = $("#heading"),
body = $("body"),
img = $("#heading img");
img.on("load", function() {
imageHeight = $(this).height();
// actually sticks (100 - 70)% of picture
// if you really want 20%, then change 70 with 80.
scrollTopThreshold = Math.ceil(imageHeight * 70 / 100);
});
$(window).on("scroll", function(e) {
if (body.scrollTop() >= scrollTopThreshold) {
heading.css({
position: "fixed",
top: -scrollTopThreshold + "px"
});
} else {
heading.css({
position: "inherit",
top: 0
});
}
});
});
Style
#heading,
#heading img {
width: 100%;
}
#comment-form textarea {
width: 100%;
height: 90px;
resize: none;
}
Markup
<div id="heading">
<img src="http://www.rtacpa.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg" alt="" />
</div>
<ol class="main">
<li>I didn't think it was that bad</li>
<li>So bad that you ate it all</li>
(repeated li elements truncated for brevity)
</ol>
<form name="comment-form" id="comment-form" action="" method="post">
<textarea name="comment" id="comment" style="" class="form-control pull-left" placeholder="Say something..." maxlength="250"></textarea>
<button type="button">Post</button>
</form>