Fix div when position reaches 85px from top of window on scroll

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.net/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'});
            }
    });

});

Thanks in advance.

Answers 1

  • 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.net/u9adhkc7/6/


Related Articles