Question

我正在构建我自己的摄影网站，其标题会在用户向下滚动页面时发生变化。 HTML菜单/标题如下所示：

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

使用CSS我创建了一个透明的黑色背景，并为菜单提供了一个高度：

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

现在，使用JavaScript，当用户向下滚动超过5个像素时，我将此标题折叠为75像素。当您向后滚动到顶部时，它会回到100px。 JavaScript代码如下所示：

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

我正在寻找一种简单的方法来改变背景透明度以及菜单的高度，并希望有人知道要使用哪些代码。我没有使用JavaScript的经验，只有HTML和CSS代码。

提前致谢，如果之前有人问我这个问题，我很抱歉（我无法使用我的关键字找到它）。

~Elmigo

Answer 1

您可以使用css转换进行设置：通过上面的例子，我刚刚在不透明度上添加了过渡属性我设法在滚动时更改它。

不是我设置和rgb颜色值而不是rgba，也将不透明度设置为0 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

上课

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

在适当的时间添加/删除

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

此外，你可以通过改变类的高度来将所有这些移动到CSS中：

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

然后使用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

我会说amflare的答案几乎是正确的。我完全删除了javascript中的<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:id="@+id/activity_show_hint" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.bert.myapplication.ShowHintActivity" android:weightSum="1"> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:scaleType="center" android:src="@raw/worldmap"> </ImageView> </LinearLayout>并按照这种方式执行操作：

CSS：

animate

JAVASCRIPT：

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

Answer 4

如果您想要更改background-color的动画，可以使用jquery-ui插件：jQuery UI。我发现它非常有用，而且它的工作正常而漂亮。

例如：

首先，在您的项目中加入jQuery UI：

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

并将Javascript内容更改为：

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

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

4 个答案: