javascript - Fix div when position reaches 85px from top of window on scroll - Stack Overflow

admin管理员组

文章数量:1334935

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

Share Improve this question Follow edited Nov 14, 2022 at 22:35 Dharman♦ 33.4k2727 gold badges101101 silver badges147147 bronze badges asked Mar 29, 2016 at 5:41 JPBJPB 60022 gold badges66 silver badges3131 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptFix div when position reaches 85px from top of window on scrollStack Overflow