Question

我有一个背景，当你向下滚动JS时，我附加一个固定的类，使它成为一个固定的附件，但背景图像不会开始消失在内容后面，直到它到达顶部，我会就像有一个小空间说在背景图像上方20 - 40px的空间，而内容滚动它。

的示例中看到这一点

当页面开始时，背景上方有空间，但一旦到达滚动的位置，背景就会触及顶部，我仍然希望在BG和页面顶部之间留出空间。

#about-banner {
background-image: url('http://hearthable.com/img/hearthable/about/test.jpg');
width: 700px;
height: 325px;
background-repeat: no-repeat;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.about-fixed {
    background-attachment: fixed;
 }

 $(document).ready(function () {
 var top = $('#about-banner').offset().top - 20 - parseFloat($('#about-  banner').css('marginTop').replace(/auto/, 0));
 $(window).scroll(function (event) {
     // what the y position of the scroll is
     var y = $(this).scrollTop();

     // whether that's below the form
     if (y >= top) {
         // if so, ad the fixed class
         $('#about-banner').addClass('about-fixed');
     } else {
         // otherwise remove it
         $('#about-banner').removeClass('about-fixed');
     }
 });
});

Answer 1

添加background-position等于你需要的保证金，你应该好好去：

#about-banner {
    background-position:0 40px;
    /* ... */
}

另外，为了使其正常工作，您实际上并不需要任何js。只需将background-attachment: fixed;添加到横幅即可;在这种情况下，您实际上并不需要top ID＆div; d div。我更新了你的小提琴：http://jsfiddle.net/4VkBL/2/

Answer 2

您可以将CSS background-position用于'about-fixed'类。

.about-fixed {
    background-attachment: fixed;
    background-position: 8px 40px;
}

JSFiddle：http://jsfiddle.net/f95Qy/1/

将空间保持在固定背景上方向上滚动

2 个答案: