Shrink a fixed Div after user has scrolled 175px with animation

Question

I have a div that is fixed at the top of the page, which holds the navigation to the website. It has a height of 175px. This DIV will remain on show as you scroll down the page.

I would like this div to shrink to a height of 90px when the user has scrolled down the page 175px and remain at 90px as they scroll down the page. When they scroll back up to the top, I'd like the DIV to grow back to its original 175px height.

I'd like this to animate when doing so (preferably slide up and slide down) and would prefer to use CSS3 to do so...

Here is a fiddle of what I have so far but because I'm a query noob, not sure how to go about things… http://jsfiddle.net/bnsUB/

EDIT: I forgot to mention that I also have content within this DIV that will need its paddings etc. adjusted whilst the container slides up/down. So if those padding values could shrink/grow as well then that would be an added bonus

Ohad · Accepted Answer · 2012-08-29T10:08:13.493

3

You need to trigger an action based on the current $.scrollTop() value of the window.

Something like:

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('.wrapper').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('.wrapper').stop().animate({ height: 175 },100);
    }
});

Here goes: http://jsfiddle.net/bnsUB/4/

If you want to animate any other thing (such as paddings and margins), just add them as values to the object you pass to the .animate() function. ( for example - { height: 175, 'padding-top': 20, 'margin-top': 10 } etc. )

edited Aug 29 '12 at 10:08

answered Aug 29 '12 at 09:32

Ohad

1,719
1
16
20

I seem to be getting thin white lines during and after the affect that stay visible on my machine...Does this method affect CPU performance? – egr103 Aug 29 '12 at 09:45
This souldn't be too processor intensive.... What browser and OS are you using? It works great here on OSX / Chrome and Firefox. – Ohad Aug 29 '12 at 09:45
I'm in Chrome on Mac Lion. Just checked in FF and works fine too. I'm on the dev channel for Chrome (unfortunately) and its not the first time I've seen buggy stuff happening :( Want to opt out of dev versions, just want a stable Chrome browser lol! I will test what you suggest re: paddings etc. – egr103 Aug 29 '12 at 09:48
Well, that's why the dev channel is not something you should use everyday for development :) – Ohad Aug 29 '12 at 09:50
When I put it into my webpage, it won't work. Dev tools is saying: Uncaught SyntaxError: Unexpected token ILLEGAL Any ideas? – egr103 Aug 29 '12 at 10:03
I forgot to mention that the above illegal error is just by copy pasting your code from jsFiddle. I haven't added any other CSS styles yet. – egr103 Aug 29 '12 at 10:12
Since you can see it works ok in jsFiddle, it may be something in your code. Make sure you copied the latest version, as I've done some imporvements. – Ohad Aug 29 '12 at 10:16
Is that in jsFiddle or the answer above? – egr103 Aug 29 '12 at 10:18
both work. The one in jsFiddle has the added '`padding-top`' animation. – Ohad Aug 29 '12 at 10:19
Ok great. Seems to be working just great now. Your code wasn't the problem though, copying from jsFiddle was: http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal – egr103 Aug 29 '12 at 10:21

vivek salve · Answer 2 · 2012-08-29T10:17:52.353

0

$(window).scroll(function()
{
    if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $('#tt').animate({height:'90px'}, 500);
      }

});

edited Aug 29 '12 at 10:17

answered Aug 29 '12 at 09:41

vivek salve

991
1
9
20

Thanks. I haven't tested this yet. Please see updated question regarding adjusting paddings etc on the content within the container :) – egr103 Aug 29 '12 at 09:43
user the height:'90px', padding-left:20 and so on in the animate function – vivek salve Aug 29 '12 at 09:50

score 0 · Answer 3 · answered Dec 03 '18 at 12:39

Here is a solution in vanilla JS and CSS animation:

JS:

window.onscroll = function () {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 175 || document.documentElement.scrollTop > 175) {
    document.getElementById("header").classList.add("narrow");
  } else {
    document.getElementById("header").classList.remove("narrow");
  }
}

CSS:

#header{
  transition: 0.2s;
  height: 175px;
}
#header.narrow{
  height: 90px !important;
}
#header .anyelementclass{
  transition: 0.2s;
}
#header.narrow .anyelementclass{
  /* any style here */
}

Shrink a fixed Div after user has scrolled 175px with animation

3 Answers3