全宽度div消失在卷轴上。

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的例子--所以谢谢大家！！

/ update /所以，我将让@bfmags帮助下完成的工作用于未来的研究，https://jsfiddle.net/flavioneto/13b1oktL/1/还添加了“背景-附件:固定”，以给卷轴带来更酷的效果。

Answer 1

在这个例子中，他们只是在图像滚动之后移除header div元素

    $(window).scroll(function() {

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

您还可以将显示样式更改为none，或者将div的css类更改为不包含图像作为背景的样式(以及正确的高度/其他)。

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