视差滚动底部答案

【问题标题】：Parallax scrolling bottom视差滚动底部
【发布时间】：2014-12-17 13:39:38
【问题描述】：

您好，我的网站有问题，我的问题是：当我在我的页面 (here is the link) 上向下滚动并到达我看到的页面底部时，页脚不在底部页。我知道错误是，当我滚动时，顶部的 bootsrtap 轮播会产生视差效果。我使用 jquery 和 css3 变换制作了这种视差效果：

$(window).scroll(function() {
    if($('html').width() > 767) { //For mobile devices
        var top = $(window).scrollTop();
        $('.parallax').css({
            'transform': 'translate(0px, -' + (top / 500) + 'px)'
        });
        $('.parallax + section').css({
            'transform': 'translate(0px, -' + top + 'px)'
        });
        console.log('A parallax effect működik... top: ' + top);
    }
});

所以 body 中的部分正在向上平移，但 body 的高度没有动态变化。所以这是我的问题。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你在底部的 js(scripts) 需要在 body(element) 结束标签内而不是在外面。

这是一个纯 CSS 无 JS 的视差框架，这使得它的性能非常快：http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

【讨论】：