scrolltop上的javascript动画div高度+背景颜色

Question

I'm building my own photography website with a header that changes when the user scrolls down the page. The HTML menu/header looks like this:

<div id="menu" class="fluid">
header/menu content
</div>

Using CSS I created a transparent black background and gave the menu a height:

#menu {
height: 100px;
background-color: rgba(0,0,0,0.1);
}

Now, using JavaScript, I made this header collapse to 75 pixels when the user scrolls down more than 5 pixels. When you scroll back to the top it goes back to 100px. The JavaScript code looks like this:

<script>
// Minimize menu on scroll
  $(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
  if (scrollTop > 5) {
      $('#menu').stop().animate({height: "75px"},150);
  }
  else {
      $('#menu').stop().animate({height: "100px"},150);
  }
  });
</script>

I am looking for an easy way to change the background transparency together with the height of the menu and was hoping anyone knew what code to use for it. I have no experience with JavaScript, only with HTML and CSS code.

Thanks in advance, and I'm sorry if this question was asked before (I couldn't find it using my keywords).

~ Elmigo

Answer 1

You can make annimation just using css transition : by example above I've just added transition property on opacity then I managed to change it on scrolling.

not that I set and rgb color value instead of rgba , also set opacity to 0 .1;

 // Minimize menu on scroll $(window).on('scroll', function () { var scrollTop = $(window).scrollTop(); if (scrollTop > 5) { $('#menu').stop().animate({height: "50px"},150); //$('#menu').css("opacity","0.8"); $('div').css('background-color', 'rgba(0,0,0,0.8)') } else { $('#menu').stop().animate({height: "100px"},150); //$('#menu').css("opacity","0.1"); $('div').css('background-color', 'rgba(0,0,0,0.1)') } });

 #menu { height: 100px; background-color: rgba(0,0,0,0.1); transition:background-color 0.5s ease; color:green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu" class="fluid"> <p>gggg<p> </div> text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text <br>text<br>text<br>text

Answer 2

Make a class

.darkerbg {
  background-color: rgba(0,0,0,0.5);
}

Add/remove it at the appropriate times

if (scrollTop > 5) {
  $('#menu').stop().animate({height: "75px"},150);
  $('#menu').addClass('darkerbg');
}
else {
  $('#menu').stop().animate({height: "100px"},150);
  $('#menu').removeClass('darkerbg');
}

---

Additionally, you could move all this into CSS by changing the height with the class like so:

.menu {
  //various properties
  transform: all 0.1s; // this provides the animation effect
}
.big {
  height: 100px;
  background-color: rgba(0,0,0,0.1);
}
.small {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}

Then do this with the JS:

if (scrollTop > 5 && !$('#menu).hasClass('small')) {
  $('#menu').removeClass('big'); //just incase it is there
  $('#menu').addClass('small');
} else if (scrollTop <= 5 && !$('#menu).hasClass('big')) {
  $('#menu').removeClass('small'); //just incase it is there
  $('#menu').addClass('big');
}

Answer 3

I would say amflare's answer is almost correct. I'd remove the animate from the javascript altogether and do it this way:

CSS:

.darkerbg {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}

#menu {
height: 100px;
background-color: rgba(0,0,0,0.1);
transition: all 0.5s;
}

JAVASCRIPT:

if (scrollTop > 5) {
  $('#menu').addClass('darkerbg');
}
else {
  $('#menu').removeClass('darkerbg');
}

Answer 4

If you want to animate the changing of the background-color , you can use jquery-ui plugin: jQuery UI . I find it very useful and it's workink fine and pretty.

For example:

First, include the jQuery UI in your's project:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="></script>

And change the Javascript content to:

<script>
// Minimize menu on scroll
$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 5) {
        $('#menu').stop().animate({height: "75px", backgroundColor: "rgba(0,0,0,0.5)"}, 150);
    }
    else {
        $('#menu').stop().animate({height: "100px", backgroundColor: "rgba(0,0,0,0.1)"},150);
    }
});
</script>