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

fixed div on scroll jquery example
react shrink header on scroll
scale image on scroll
div always on top when scrolling
resize image on scroll
resize header on scroll codepen

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

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. )

Shrink a fixed Div after user has scrolled 175px with animation, 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  Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon

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

});

How To Shrink a Header on Scroll, Learn how to shrink a header on scroll with CSS and JavaScript. <div id="​header">Header</div> position: fixed; /* Fixed position - sit on top of the page */ transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */ When the user scrolls down 50px from the top of the document, resize the  How To Shrink a Header on Scroll Step 1) Add HTML: Create a header: fixed; /* Fixed position - sit on top of the page */ // When the user scrolls down 50px

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 */
}

Scroll-Then-Fix Content, (I'm going to use SCSS here because the nesting is nice for managing states.) Assuming we've put a class of “fix-search” on a parent element. Even if you fixed the header to look right after a change, the JavaScript has For an animation effect when something scrolls into view, you would just use the  “Apply styles when the user has scrolled away from the top” is a legit use case. It makes me think of a once function (like we have in jQuery) where any scroll event would only be triggered once and then not again. They scrolled! So, by definition, they aren’t at the top anymore! But that doesn’t deal with when they scroll back to the top.

Building performant expand & collapse animations, When making expand and collapse effects you can use scale transforms to clip​: rect(0px 112px 175px 0px); element it's operating on is either absolutely or fixed positioned, which can require a little extra wrangling. Good: animating scales. Since this effect involves something getting bigger and smaller, you can use a  .important-thing:onscreen { animation: zing 1s 0.5s; /* start brief animation half a second after scrolling into view */ } (Perhaps the pseudoclass could have a parameter, similar to nth-of-type parameters, so that you could limit whether the effect happened every time the element came into view or only the first few times?)

Creating Scroll-based Animations using jQuery and CSS3, The main reason we would want to trigger animations on scroll, is so that they activate just as the user scrolls an element into view. Well, it turns out that using vanilla JS for animations might not be such a bad an idea after all. This will enable our detection function to work when we resize or change  Use JavaScript to detect when the user has scrolled a certain distance down the page. Use JavaScript again to add a new CSS class to the header element. In the CSS, add styles for this new class to shrink the header height. In the CSS for the default header, add a CSS transition so the height changes with an animated effect.

Bootstrap 4 - Navbar change after scroll [duplicate], This is my HTML markup for my current NavBar: <header> <nav To create a similar Navbar effect in Bootstrap 4, you can use position: sticky (not How it works: A fixed-top Navbar with data-toggle="affix": <div class="navbar shrink height (alpha-6) transparent over background change color after scroll svg-​animate Stop the Divi Header from Shrinking on Scroll This post may contain referral links which may earn a commission for this site The Divi Theme header has a default scroll effect which sees it "shrink" to a more compact version as you scroll down the page.

Comments
  • 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?
  • This souldn't be too processor intensive.... What browser and OS are you using? It works great here on OSX / Chrome and Firefox.
  • 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.
  • Well, that's why the dev channel is not something you should use everyday for development :)
  • When I put it into my webpage, it won't work. Dev tools is saying: Uncaught SyntaxError: Unexpected token ILLEGAL Any ideas?
  • Thanks. I haven't tested this yet. Please see updated question regarding adjusting paddings etc on the content within the container :)
  • user the height:'90px', padding-left:20 and so on in the animate function