Javascript 当页面到达滚动中的某个点时加载宽度转换？

我试图在页面滚动到某个点时触发动画。以下是我目前掌握的情况：

$（窗口）。滚动（函数（）{
var hT=$（'#photoshop'）.offset（）.top，
hH=$（“#photoshop”）.outerHeight（），
wH=$（窗口）.height（），
wS=$（this.scrollTop（）；
log（（hT-wH），wS）；
如果（wS>（hT+hH-wH））{
//我需要CSS发生在这里，所以它发生在页面滚动到“photoshop”时//
}
});
正文{
背景色：黑色；
}
#photoshop{
字体系列：“Roboto”，无衬线；
颜色：#FF5444；
文本对齐：左对齐；
背景色：透明；
宽度：20%；
左缘：24%；
利润底部：3倍；
填充：2px；
边缘顶部：10px；
左：3倍；
字号：80%；
}
/*当页面滚动到id=“photoshop”时，我需要这样做
#photoshop{
宽度：40%；
背景色：#134；
过渡时间：400毫秒；
-moz转换：在400ms内轻松实现；
-webkit过渡：在400ms内轻松过渡；
过渡延迟：200ms；
}
*/
{
显示：内联；
颜色：#fff；
右边距：3倍；
字号：80%；
}

80%photoshop
您可以使用jquery
.css（）
函数（）。它接受一个json对象，其中包含您希望应用的css属性和值。所以你可以这样做：

if (wS > (hT + hH - wH)) {
    $('#photoshop').css({
        'width': '40%',
        'background-color': '#134',
        'transition': 'ease-in 400ms',
        '-moz-transition': 'ease-in 400ms',
        '-webkit-transition': 'ease-in 400ms',
        'transition-delay': '200ms',
    });
}

试试下面的

您可以使用jQuery方法

只要使用css创建一个新类，并在div在视口中可见时使用
addClass
方法应用该类即可


$（窗口）。滚动（函数（）{
var hT=$（'#photoshop'）.offset（）.top，
hH=$（“#photoshop”）.outerHeight（），
wH=$（窗口）.height（），
wS=$（this.scrollTop（）；
log（（hT-wH），wS）；
如果（wS>（hT+hH-wH））{
$（'#photoshop'）.addClass（“photoshop_trans”）；
}
});
正文{
背景色：黑色；
}
.笨蛋{
高度：500px；
}
#photoshop{
字体系列：“Roboto”，无衬线；
颜色：#FF5444；
文本对齐：左对齐；
背景色：透明；
宽度：20%；
左缘：24%；
利润底部：3倍；
填充：2px；
边缘顶部：10px；
左：3倍；
字号：80%；
}
/*当页面滚动到id=“photoshop”时，我需要这样做*/
#photoshop.photoshop\u trans{
宽度：40%；
背景色：#134；
过渡时间：400毫秒；
-moz转换：在400ms内轻松实现；
-webkit过渡：在400ms内轻松过渡；
过渡延迟：200ms；
}
{
显示：内联；
颜色：#fff；
右边距：3倍；
字号：80%；
}

80%photoshop