Question

嘿那里:)当我有人滚动到400px时，我想要执行一个功能有些麻烦。我想首先在400px处显示标题背景颜色，同时从0到1不透明度平滑地显示它。

我已经做了一些可以完成我想要的东西：P但是当我开始滚动时会立即开始。

如果你在du达到400px之后更新浏览器，是否有可能让它保持完全显示？

干杯！

HTML:

<header class="header">
    <div class="header-bg">Logo</div>
</header>

CSS:
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
z-index: 3;
color: #fff;
}

.header-bg {
width: 100%;
height: 100%;
background: rgba(54, 54, 54, 1);
opacity: 0;
}

JS：

var divFade = $('.header-bg');
$(document).ready(function() {
    divFade.css('opacity', 0);
});
$(window).scroll(function() {
    var percent = $(document).scrollTop() / (400);
    divFade.css('opacity', percent);  
});

Answer 1

我不确定，但我认为你需要这样的东西：

CSS：

body{
    height: 2000px;
}

.header {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0px;
    z-index: 3;
    color: #fff;
}

.header-bg {
    width: 100%;
    height: 100%;
    background: rgba(54, 54, 54, 1);
    opacity: 0;
}

JS：

$(function () {

    divFade = $(".header-bg");

    var toggleHeader = function (noAnimate) {

        var threshold  = 400,
            fadeLength = 300,
            opacity,
            scrollTop  = $(document).scrollTop();

        if (scrollTop < threshold) {
            opacity = 0;
        } else if (scrollTop > threshold + fadeLength) {
            opacity = 1;
        } else {
            if (noAnimate) {
                opacity = 1;
            } else {
                opacity = (scrollTop - threshold) / fadeLength;
            }
        }

        divFade.css("opacity", opacity);

    };

    toggleHeader(true);
    $(window).scroll(function () {toggleHeader();});

});

演示：http://jsfiddle.net/xa86d31m/1/

在400px滚动的div上平滑触发不透明度0到1

1 个答案: