Question

我要做的是以下内容：制作一个全宽图像作为网站的介绍，然后，当用户滚动时，图像慢慢滑开。我已经完成了所有工作，我的问题只是关于一个细节。所以这是javascript代码

<script type="text/javascript">
    (function() {
        var introEl = $('div.intro'), //where intro is the full width div
            introHeadingH = introEl.find('h1').height(),
            windowH = $(window).height();

        introEl.css('padding', (windowH - introHeadingH)/2 + 'px 0');

        $(document).on('scroll', function() {
            introEl.slideUp(1000, function() { $(document).off('scroll'); });
        });


    })();
</script>

这样，无论何时激活向下滚动，图像都会进入“slideUp”，但限制为“1000”ms。由于我对javascript还不是很熟悉，所以我只是在用户完成滚动时才寻求帮助以使图像完全消失。这是一个例子：http://hightidenyc.com 如果您说需要，我可以发布其余代码，但我认为这只是一个javascript案例，所以感谢大家!!

/// 更新 /// 所以，我将在@bfmags的帮助下将这项工作放在今后的研究中 https://jsfiddle.net/flavioneto/13b1oktL/1/ 它还添加了“background-attachment：fixed”以在滚动条上产生更酷的效果。

Answer 1

在示例中，它们只是在滚动图像后删除标题div元素

    $(window).scroll(function() {

        windowH = $(window).height();
        if ($(this).scrollTop()>windowH)
        {
            $('div.intro').remove();
            $(window).scrollTop(0);
        }
    });

您也可以将显示样式更改为无，或者将div的css类更改为不包含图像作为背景的样式（以及正确的高度/其他）

*使用@op_exchanger代码https://jsfiddle.net/yekL3xjq/1/

进行了更新

滚动时全宽div消失

1 个答案: