CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JPB
JPB

Reputation: 600

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

Upvotes: 2

Views: 5650

Answers (3)

Dharmendra Bisht
Dharmendra Bisht

Reputation: 290

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/

Upvotes: 1

Sajan Mullappally
Sajan Mullappally

Reputation: 448

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

Upvotes: 5

dkengaroo
dkengaroo

Reputation: 105

Try

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

Upvotes: 0

Related Questions