固定背景附件 CSS/XHTML/jQuery答案

【问题标题】：Fixed background attachment CSS/XHTML/jQuery固定背景附件 CSS/XHTML/jQuery
【发布时间】：2011-03-21 23:21:22
【问题描述】：

我目前正在开发一个网站，我有一个非常有趣的想法，可以在我的网站上添加背景图片。这是一个相当大的图像，因此根据屏幕尺寸，下半部分可能会显示也可能不会显示。

我想知道是否有可能使用 jQuery 将背景图像的附件设置为固定，只有当用户向下滚动时，才会显示图像的底部。

背景将在 CSS 中以“top”定位，并正常滚动，直到没有更多背景图像可显示，然后将其附件设置为固定。..

如果这不是一个很好的解释，我很抱歉，但我不确定如何描述它。

提前感谢 HTML/CSS/JavaScript 大师..

【问题讨论】：

标签： javascript jquery css xhtml

【解决方案1】：

$(window).scroll( function() {
    if($(this).scrollTop() > height_of_image) {
        $('body').css('background-attachment','fixed');
    } else {
        $('body').css('background-attachment','none');
    }
});

Plagiarised from here

【讨论】：

谢谢帕特里克.. 有什么办法可以让这更顺畅一点吗？目前，当达到 height_of_image 时，它有点跳跃，这是有道理的，但更平滑的过渡会有所帮助。
抱歉，不确定。需要一些聪明的javascript。您可能会弄乱背景位置设置，但这是一个大问题。
同意。谢谢你的回答:)

【解决方案2】：

很抱歉回复这么旧的帖子 - 但我找到了一个比当前答案效果更好的解决方案，因为它不会在每次用户滚动时更新背景位置属性（这在某些情况下会导致抖动效果浏览器）。

$(window).scroll(function(){

    if ($(this).scrollTop() + $(this).height() > heightOfImage ) {
        if ( ! $('body').hasClass('stopscroll') ) 
            $('body').addClass('stopscroll');
    } else {
        if ( $('body').hasClass('stopscroll') )  
            $('body').removeClass('stopscroll');
    }

});

然后在你的 css 中，这样做：

body {
    background: transparent url(images/bg.jpg) center top no-repeat;
    background-attachment: none;
}
body.stopscroll {
    background-attachment: fixed;
    background-position: center bottom;
}

浏览器的工作量减少了，工作起来更流畅了。

【讨论】：