$(function () {
ht = $("h3").offset().top;
$(window).scroll(function () {
console.log($(window).scrollTop() > ht);
if ($(window).scrollTop() > ht)
$("h3").addClass("fixed");
else
$("h3").removeClass("fixed");
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
p, h3 {margin-bottom: 10px; line-height: 1.5;}
h3 {text-align: center; border: 1px solid #ccc; border-width: 1px 0;}
h3.fixed {position: fixed; top: 0; left: 0; background-color: #fff; right: 0;}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
<h3>This would become fixed soon!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
... (repeated lorem ipsum content removed for brevity) ...
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dolore explicabo quo possimus accusantium doloremque necessitatibus pariatur, natus numquam beatae, dignissimos quisquam illum voluptas eos et velit, consequuntur eligendi totam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum iusto nemo nisi eum necessitatibus, eaque ratione tempora fuga! Molestias repellendus modi nostrum obcaecati, dignissimos, odit! Culpa voluptatem iste, illo totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum ratione unde et non minima animi, cum ut vero, voluptatem quia facere facilis libero nobis eaque ab pariatur recusandae commodi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aperiam officia corporis, modi ea. Non voluptatum, molestiae in soluta a ipsa iusto aut. Alias possimus praesentium architecto aperiam, porro maxime.</p>
</body>
</html>