Question

我正在使用的以下脚本在向下滚动时使用类.fader淡化div，它不会立即淡出，而是在滚动时逐渐消失。

一切都在发挥作用，但是我怎样才能让它在褪色效果发生的同时提升？

 //Fade Index on Scroll//
    var divs = $('.fader');
        $(window).on('scroll', function() {
    var st = $(this).scrollTop();
        divs.css({ 'opacity' : (1 - st/300) });
    });

    $(window).scroll(function() {
    if ($(this).scrollTop()>300) {
        $('.fader').fadeOut();
    } else {
        $('.fader').show();
        }
    });

HTML：

<div id="top-section">
   <div class="content fader">
       <h1>I support and guide you through the process of <span>change</span>, <span>growth</span> and <span>personal evolution</span>.</h1>
   </div>
</div>

CSS：

@media screen and (min-width: 1024px) {

        #top-section {
            color: #fff;
            height: 720px; 
            width: 1024px;

            position: relative; 
            padding: 100px 20px;
            margin: auto;
        }

        #top-section .fader {
            width: 400px;
            padding-top: 170px;
            position: fixed;
        }

    }

实时预览：http://www.life-conversations.com/

Answer 1

请替换以下行...

$(window).on('scroll', function () {

带

$(window).bind('scroll', function () {

您必须使用bind ...

Answer 2

您可以使用：

$(".fader").animate({"opacity":(1 - st/300), "top": "-"+(st/300)},200);

修改

我真的不明白你想要的效果，但这就是你想要的吗？：

$(".fader").animate({"opacity":(1 - st/300), "top": "-"+st},50);

滚动时淡出并向上移动

2 个答案: