Javascript JQuery滚动动画使对象加载不可见不可见不不透明

我使用以下代码使对象在滚动时淡入淡出。它工作得很好，只是当页面加载时，对象不可见。您必须滚动一点以使其可见。然后，滚动可以按预期降低不透明度。知道为什么吗？我使用了bootstrap和jquery，您可以运行下面的代码段来测试这个问题

谢谢， 意志

var target=$（'.fade'）；
var targetHeight=400；
$（文档）。滚动（功能（e）{
var scrollPercent=（targetlight-window.scrollY）/targetlight；
如果（滚动百分比>=0）{
css（“不透明度”，百分比）；
}
});
/*！
主题名称：冻土
作者：威尔·考菲尔德
作者URI：http://caulfield.co/
描述：描述
版本：1.0.0
许可证：GNU通用公共许可证v2或更高版本
许可证URI：许可证
文本域：frozenland.co
*/
身体{
字体系列：“Lato”，无衬线；
}
h1{
颜色：白色；
文本转换：大写；
字号：800；
字体大小：calc（70px+0.3vw）；
利润率：10px 0px 25px 0px；
}
主要{
背景：-webkit渐变（线性、左上、左下、从（#f9c4cc）到（#f27aaa））；
背景：线性梯度（#f9c4cc，#f27aaa）；
}
部分{
高度：100vh；
}
@-webkit关键帧浮冰{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-15px）；
转换：translatey（-15px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@关键帧浮冰{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-15px）；
转换：translatey（-15px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@-webkit关键帧浮动文本{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-10px）；
转换：translatey（-10px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@关键帧浮动文本{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-10px）；
转换：translatey（-10px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@-webkit关键帧浮动区{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-5px）；
transform:translatey（-5px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@浮地关键帧{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（-5px）；
transform:translatey（-5px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
.英雄{
位置：相对位置；
顶部：-50px；
}
.英雄冰{
宽度：200px；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
-webkit动画：floatIce 6s易入易出无限；
动画：浮冰6秒轻松进出无限；
}
.英雄文本{
-webkit转换：translatey（0px）；
变换：translatey（0px）；
-webkit动画：floatText 6s轻松输入输出无限；
动画：floatText 6s轻松输入输出无限；
}
.英雄之地{
宽度：250px；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
-webkit动画：floatText 6s轻松输入输出无限；
动画：floatText 6s轻松输入输出无限；
}
@-webkit关键帧插入符号浮动{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（7px）；
转换：translatey（7px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
@关键帧插入符号浮动{
0% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
50% {
-webkit转换：translatey（7px）；
转换：translatey（7px）；
}
100% {
-webkit转换：translatey（0px）；
变换：translatey（0px）；
}
}
.英雄卷轴{
颜色：白色；
字体大小：40px；
位置：绝对位置；
底部：20px；
-webkit转换：translatey（0px）；
变换：translatey（0px）；
-webkit动画：插入符号浮动1.5s轻松输入输出无限；
动画：插入符号浮动1.5s轻松输入输出无限；
}
/*#sourceMappingURL=style.css.map*/

你好，世界！
冻土
Z
Z
类
淡入
应用
不透明度：0
，替换为HTML和jQuery selector中的其他类名
应用于
.fade
元素的默认css样式的不透明度为0，规则为
。fade:not（.show）
谢谢，Narek。对于其他所有人：引导应用类
fade
，该类具有默认的
不透明度：0