Question

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

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

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

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

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

Answer 1

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

Plagiarised from here

Answer 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;
}

浏览器的工作量较少，而且工作更顺畅。

修复了背景附件CSS / XHTML / jQuery

2 个答案: