CODEWITHSUNDEEP
javascriptjquerycss
scrub
scrub

Reputation: 11

Dynamic resize a div while scrolling using jQuery

I am searching for a jQuery-solution for my fixed header. If the user scrolls down, the header shall shrink in the same way the scrolling position is until a minimum height is reached.

Example:
scrolling position: 0
div height: 250px

scrolling position: 85
div height: 165px (=250px-85)

scrolling position: 435
div height: 100px (=minimum height)

Here is the quick fiddle.

body {
    height: 1000px;
}

.header {
    position: fixed;
    background-color: lightblue;
    height: 250px;
    width: 100%;
}

<div class="header"></div>

Here is the solution for me: fiddle

Upvotes: 1

Views: 3098

Answers (1)

asprin
asprin

Reputation: 9833

You can use a combination of the Window Scroll Event and scrollTop() function to achieve the same.

$(window).scroll(function(){
    var distanceFromTop = $(document).scrollTop();
    if(distanceFromTop < 84 )
    {
        // set div height to 250px
    }   
    else if(distanceFromTop == 85)
    {
        // reduce the div height
    }
    else if(distanceFromTop > 85 && distanceFromTop <= 434)
    {
        // do something with height if required
    }
    else if(distanceFromTop > 434)
    {
        // set div height to 100px
    }   
});

DEMO

Upvotes: 1

Related Questions