Fix Div wenn Position 85px von oben des Fensters auf Scroll

Question

erreicht

Ich muss 'middle_block2' entweder auf der Unterseite der festen Position 'top_block' oder 85px (die Höhe von 'top_block') vom oberen Rand des Fensters, wenn 'middle_block2' erreicht den unteren Teil von 'top_block' beim Scrollen. Hier ist der Code und eine Verbindung zur jsfiddle.

Ich habe es funktioniert, wenn es das obere Ende des Fensters erreicht, aber das ist so weit wie ich in der Lage war zu bekommen.

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

});

Vielen Dank im Voraus.

Answer 1

ändern Sie den Code wie folgt aus und überprüfen

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

Aktualisiert Fiddle: https://jsfiddle.net/u9adhkc7/4/

Answer 2

Versuchen

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

Answer 3

Versuchen Code unten erwähnt:

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

Upd Ated Fiddle: https://jsfiddle.net/u9adhkc7/6/