如何向下滚动文本？

即时通讯新的jQuery和我需要帮助。当您向下滚动网站时，我想让文本向上移动，静态框会慢慢消失。如何向下滚动文本？

p, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    height: 3000px; 
 
    font-family: sans-serif; 
 
    background-color: #282828; 
 
} 
 

 
#slide { 
 
    color: #ffffff; 
 
    font-weight: 600; 
 
    font-size: 80px; 
 
    position: absolute; 
 
    top: 180px; 
 
    left: 40px; 
 
    z-index: 10; 
 
} 
 

 
#static { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: orange; 
 
    float: right; 
 
    margin-top: 150px; 
 
    margin-right: 80px; 
 
    color: #ffffff; 
 
    text-align: right; 
 
    font-size: 12px; 
 
}

<div id="box"> 
 
    <p id="slide">Some text</p> 
 
    <!-- This slideUp when scrolling down --> 
 
    <div id="static">This box is static</div>

来源

2017-05-04 Nol

有没有jQuery的[** FIDLE **]（https://jsfiddle.net/dzket0tj/），因为我的代码不起作用。谢谢<3 – Nol

添加代码不作为评论问题。并向我们展示您尝试过的内容，无论它是否有效 –

您所描述的效果称为视差。你不需要jQuery，这可以通过纯CSS来实现。 – margarita

如何对这种做法：

$(document).on('scroll', function() { 
    $("#slide").css("top", Math.max(180 - 0.2*window.scrollY, 0) + "px"); 
    $("#static").css("opacity", Math.max(1 - 0.004*window.scrollY, 0)); 
})

Here是更新的小提琴。

我当然会推荐改变函数，如果你不喜欢线性转换。

来源

2017-05-04 07:53:32

哦，那太棒了。非常感谢你。（> ^^）> – Nol

如何向下滚动文本？

回答

相关问题