最後までスクロールバックグラウンド画像

Question

私はサイトで作業しており、y方向の背景をrepeatにしたくありません。

私はそれを行う方法を知っています。

しかし、イメージの後に私は背景が白または他の色になりたくないです。

私はそれがその場所に到達したときに修正したり、バックグラウンドをスクロールさせて残りのサイトを残して、白い部分には手を付けないようにしたいと思います。

どうもありがとう

Answer 1

からつかみました。私は、Alex Moralesのヒントを適応させた短いjQueryスクリプトを書いていました。

次のコードでは、本文の背景イメージは、下部に達するまで残りのサイトと共にスクロールします。私のホームページ（http://blog.neonfoto.de）を見て、それが何かを見ることができます。

$(window).scroll(function(){ 
    var ypos = $(window).scrollTop(); //pixels the site is scrolled down 
    var visible = $(window).height(); //visible pixels 
    const img_height = 1080; //replace with height of your image 
    var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom 
//change position of background-image as long as there is something not visible at the bottom 
if (max_scroll > ypos) { 
    $('body').css('background-position', "center -" + ypos + "px"); 
    } else { 
    $('body').css('background-position', "center -" + max_scroll + "px"); 
    } 
}); 

これは実際に私がJavaScriptとJQueryで行った最初のことなので、改善があれば大丈夫です！

Answer 2

それは超うまくサポートしていないですので、それはCSS3のですが、私はbackground-size財産になります。

Answer 3

これはちょうど私の頭の上から外れていますが、おそらく背景画像を含む別のdivを作成する必要があると思います。メインコンテンツの前のマークアップに配置して、メインコンテンツを絶対的に配置すると、メインコンテンツの背後、ページの上部に配置されます。だから、：

CSS：

#background_div 
{ 
    background: url(images/some_image.png); 
    height: 600px; 
    width: 900px; 
} 

#main 
{ 
    height: 1200px; 
    width: 800px; 
    background: rgba(0, 0, 0, 0.25); 
    position: absolute; 
    top: 0; 
} 

HTML：

<div id="background_div"> &nbsp; </div> 

は、次に、あなたは何をすべきかは、画面上のdivの位置を検出するために（私はjQueryのをお勧めします）JavaScriptを使用しています。

のjQuery：

このコードは、私はこの問題への解決策を探していた間、私はこのスレッドを見つけたhttp://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

var $scrollingDiv = $("#background_div"); 

    $(window).scroll(function(){    
     $scrollingDiv 
      .stop() 
      .animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow");      
    });