I need to fix 'middle_block2' to either the bottom of the fixed position 'top_block' or 85px (the height of 'top_block') from the top of the window when 'middle_block2' reaches the bottom of 'top_block' when scrolling down. Here is the code and a link to the jsfiddle.

I have it working when it reaches that top of the window but that is as far as I have been able to get.

jsfiddle: /

HTML

<div class='top_block'>
<p>Top Block</p>
</div>

<div class='middle_block1'>
<p>Middle Block 1</p>
</div>

<div class ='ghost_div'>
<div class='middle_block2'>
<p>Middle Block 2</p>
</div>
</div>

<div class='bottom_block'>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
</div>

CSS

* {
margin:0;
padding:0;
}

.top_block {
width:100%;
background-color: black;
height: 85px;
color:white;
padding: 0px;
margin: 0px;
position:fixed;
}


.middle_block1 {
width:100%;
background-color: yellow;
height: 450px;
color:black;
padding-top: 85px;
z-index:2;
}

.ghost_div {
height: 85px;
background-color: red;
}

.middle_block2 {
width:100%;
background-color: blue;
height: 85px;
color:white;
}

.bottom_block {
width:100%;
background-color: red;
height: 950px;
color:white;
}

JQUERY

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('.middle_block2').css({position: 'fixed', top: '85px'});  
            } else {
                    $('.middle_block2').css({position: 'relative', top: '0px'});
            }
    });
});

I need to fix 'middle_block2' to either the bottom of the fixed position 'top_block' or 85px (the height of 'top_block') from the top of the window when 'middle_block2' reaches the bottom of 'top_block' when scrolling down. Here is the code and a link to the jsfiddle.

I have it working when it reaches that top of the window but that is as far as I have been able to get.

jsfiddle: https://jsfiddle/jpolsonb/u9adhkc7/1/

HTML

<div class='top_block'>
<p>Top Block</p>
</div>

<div class='middle_block1'>
<p>Middle Block 1</p>
</div>

<div class ='ghost_div'>
<div class='middle_block2'>
<p>Middle Block 2</p>
</div>
</div>

<div class='bottom_block'>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
<p>Bottom Block</p>
</div>

CSS

* {
margin:0;
padding:0;
}

.top_block {
width:100%;
background-color: black;
height: 85px;
color:white;
padding: 0px;
margin: 0px;
position:fixed;
}


.middle_block1 {
width:100%;
background-color: yellow;
height: 450px;
color:black;
padding-top: 85px;
z-index:2;
}

.ghost_div {
height: 85px;
background-color: red;
}

.middle_block2 {
width:100%;
background-color: blue;
height: 85px;
color:white;
}

.bottom_block {
width:100%;
background-color: red;
height: 950px;
color:white;
}

JQUERY

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('.middle_block2').css({position: 'fixed', top: '85px'});  
            } else {
                    $('.middle_block2').css({position: 'relative', top: '0px'});
            }
    });
});

• javascript
• jquery
• html
• css

• you can put top as 85px at else condition how ever it is not entering to if condition >> $('.middle_block2').css({position: 'relative', top: '85px'}); – Iqbal Pasha Commented Mar 29, 2016 at 6:03
• Thanks but I already tried that, it just moves middle_block2 85px down into bottom_block? – JPB Commented Mar 29, 2016 at 6:08
• yes and it will change position to relative – Iqbal Pasha Commented Mar 29, 2016 at 6:10
• That's not the problem though, it needs stay where it is until the top of middle block reaches the bottom of top block, it then bees fixed. It can't overlap the bottom block. – JPB Commented Mar 29, 2016 at 6:12

3 Answers 3

Please modify the code like this and check

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
        if( $(document).scrollTop() > stickyHeaderTop-85 ) {
            $('.middle_block2').css({position: 'fixed', top: '85px'});  
        } else {
            $('.middle_block2').css({position: 'relative', top: '0px'});
        }
    });
});

Updated Fiddle : https://jsfiddle/u9adhkc7/4/

Try below mentioned code:

$(function(){
var topBlockheight=$('.top_block').height();
        // Check the initial Position of the fixed_nav_container
        var stickyHeaderTop = $('.middle_block2').offset().top; 
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop-topBlockheight ) {
                        $('.middle_block2').css({position: 'fixed', top: '85px'});  
                } else {
                        $('.middle_block2').css({position: 'relative', top: '0px'});
                }
        });
  });

Updated Fiddle : https://jsfiddle/u9adhkc7/6/

Try

.middle_block2 {
    width:100%;
    background-color: blue;
    height: 85px;
    color:white;
    postion: fixed;
}