scrolltop() triggering too early - scrolltop

Question

I'm going crazy.. I'm trying to get the effect of sticky navigation, but instead of navigation, I have an image that should become fixed at the top of the page as soon as it hits the top of window, and then the following elements just scrolling on top of that image. That's my code:
The basic html is:
<section class="about">
...
</section>
<section>
<img src='' class="sticky">
<div> ...</div>
</section>
Javascript:
$(window).load(function() {
var sticky = $(".scroll");
var height = $("#about").height();
$(window).scroll(function() {
if($(this).scrollTop() > height ){
sticky.addClass("fix");
} else {
sticky.removeClass("fix");
}
});
})
It's working fine, except - the image (".sticky") becomes fixed too soon. I'm scrolling down, and even before my "about" section moves away, the image becomes fixed and jumps on top. The screenshot shows it. The big image with a girl on it has class "sticky"
here's the screenshot
Please help

Answer 1

You schould check img offset from top of the page and not the height of the <section class="about">.
I've used instead of an image, a div to show how 'sticky' should be achieved. You have also in your code snippet unclosed <section> tag.
var offset = $('.sticky').offset().top;
$(window).on('scroll', function () {
if ($(document).scrollTop() > offset) {
$('.sticky').addClass('fix');
} else {
$('.sticky').removeClass('fix');
}
});
.about {
height: 100vh;
width: 200px;
background: lightgreen;
}
.example {
background: lightblue;
height: 120vh;
width: 200px;
}
.sticky {
background: salmon;
width: 200px;
height: 100px;
}
.fix {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="about"></section>
<section class="example">
<div class="sticky">quasi img</div>
<div> ...</div>
</section>