Q:

jQuery - Hide Fixed Element After Scrolling Past Another

Basicly I want to hide a fixed element after it passes by another one and I was not able to figure it out how to.
Here is my code:
<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){ 

    var startOn = 5;
     var mc = $('#main_content').offset().top;
     var rc = $('#related_content').offset().top;
     var om = $('#openmodal').offset().top;

    var rangeLimit = rc - om;

    $(window).scroll(function() {

         var wscroll = $(this).scrollTop();

        $('#openmodal').text('Y:' + wscroll);

        if (wscroll <= rangeLimit && wscroll > startOn ) {

            $('#openmodal').fadeIn(100);

        } else {

            $('#openmodal').fadeOut(100);

        }
    });

});
</script>
<style type="text/css">

    body { 
        background-color: #fff; 
    }

    div { 
       height: 1400px; /* For testing purposes only! It will vary afterwords. */
       border-top: 1px dotted black; 
       padding: 50px; 
       margin: 20px 20px 40px; 
       background-color: #F0F0F0;
    }

    div#wrapper { height: auto; border: none; background-color: #fff;}

    #openmodal {
            position: fixed;
            background-color: #0F5F01;
            cursor: pointer;
            bottom: 20px;
            left: 6px;
            width:60px;
            border: 1px solid black;
            height: 27px;
            padding: 0;
            display: none;
            z-index: 999;
    }

</style>
</head>

<body>

<div id="wrapper">

<h1>My Website!</h1>

    <div id="main_content">
     <h2>This is my main content.</h2>
    </div>

    <div id="openmodal"></div>

    <div id="related_content">
     <h3>And this is my related content.</h3>
    </div>

</div>
</body>
</html>

So my idea is to keep #openmodal visible until the scroll passes the #related_content div and it seems I can't get it working. All DIV's would have variable heights (except #openmodal), I've just set heights here for testing proposes.
Any idea how to archive this? 

A:

I believe I've finally figure it out! 
So basically I cannot get an hidden element position, and I have to use position() instead of offset().
Here is what I've ended up with:
<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).load(function() {

     var startOn = 5;
     var rc = $('#related_content').position().top;
     var om = $('#openmodal').position().top;
     $('#openmodal').hide();

    var rangeLimit = rc - om; 

    $(window).scroll(function() {

        var wscroll = $(this).scrollTop();

        $('#openmodal').text('Y:' + wscroll);

        if ( wscroll <= rangeLimit && wscroll > startOn ) {

            $('#openmodal').fadeIn(500);

        } else {

            $('#openmodal').fadeOut(500);

        }
    });

});
</script>
<style type="text/css">

    body { 
        background-color: #fff; 
    }

    div { 
       height: 1400px; /* For testing purposes only! It will vary afterwords. */
       border-top: 1px dotted black; 
       padding: 50px; 
       margin: 20px 20px 40px; 
       background-color: #F0F0F0;
    }

    div#wrapper { height: auto; border: none; background-color: #fff;}

    #openmodal {
            position: fixed;
            background-color: #0F5F01;
            cursor: pointer;
            bottom: 20px;
            left: 6px;
            width:60px;
            border: 1px solid black;
            height: 27px;
            padding: 0;
            z-index: 999;
    }

</style>
</head>

<body>

<div id="wrapper">

<h1>My Website!</h1>

    <div id="main_content">
     <h2>This is my main content.</h2>
    </div>

    <div id="openmodal"></div>

    <div id="related_content">
     <h3>And this is my related content.</h3>
    </div>

</div>
</body>
</html>

