jQueryの固定ラップ

Question

私のページには、スクロール後に移動したいdiv（固定ラップ）があります。 jQueryで何かを試しましたが、divの高さが高すぎてフッターを越えてしまいました。

img1

img2

ここに私のコードです：

申し訳ありませんが、EDIT2：

var elementPosition = $('#fixed-wrapper').offset(); 
 
$(window).scroll(function() { 
 
    if ($(window).scrollTop() > elementPosition.top) { 
 
    $('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%'); 
 
    } else { 
 
    $('#fixed-wrapper').css('position', 'static'); 
 
    } 
 
});

#header { 
 
\t width: 101%; 
 
\t padding: 10px 0px 0px; 
 
\t margin: -10px -10px 10px -10px; 
 
\t background-color: rgba(0, 0, 0, 0.7); 
 
\t display: table; 
 
\t min-width: 700px; 
 
} 
 

 
#main-bets{ 
 
\t display: table; 
 
\t float: left; 
 
\t width: 68%; 
 
\t margin-left: 7%; 
 
\t margin-top: 20px; 
 
\t margin-bottom: 30px; 
 
\t min-width: 900px; 
 
\t max-width: 900px; 
 
\t background-color: rgba(0, 0, 0, 0.5); 
 
} 
 

 
#fixed-wrapper { 
 
    \t display: table; 
 
    \t float: right; 
 
    \t width: 22%; 
 
    \t right: 5px; 
 
    \t margin: 20px 1%; 
 
    \t max-width: 300px; 
 
} 
 

 
#footer { 
 
\t width: 101%; 
 
\t padding: 10px 0px 0px; 
 
\t margin: 20px -10px -10px -10px; 
 
\t background-color: rgba(0, 0, 0, 0.7); 
 
\t display: table; 
 
\t clear: both; 
 
}

<div id="header"> 
 
    ... 
 
</div> 
 

 
<div id="main-bets 
 
    ... 
 
</div> 
 

 
<div id="fixed-wrapper"> 
 
\t .... 
 
</div> 
 

 
<div id="footer"> 
 
\t ... 
 
</div>

Answer 1

あなたはそのために（demo pageを）私のsticky float jQueryプラグインを使用することができ、またはリレーを使うively新しいCSSプロパティ：position:sticky（古いEGDE/IEではないsupported）今

Answer 2

チェック：

body {padding:0; margin: 0;} 

#header { 
    width: 101%; 
    padding: 10px 0px 0px; 
    margin: -10px -10px 10px -10px; 
    background-color: rgba(0, 0, 0, 0.7); 
    display: table; 
    min-width: 700px; 
} 

#main-bets{ 
    float: left; 
    width: 68%; 
    margin-left: 7%; 
    margin-top: 20px; 
    margin-bottom: 30px; 
    min-width: 900px; 
    max-width: 900px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

#fixed-wrapper { 
    float: left; 
    background: red; 
    width: 22%; 
    right: 5px; 
    margin: 20px 1%; 
    max-width: 300px; 
} 

#footer { 
    width: 101%; 
    padding: 10px 0px 0px; 
    margin: 20px -10px -10px -10px; 
    background-color: rgba(0, 0, 0, 0.7); 
    clear: both; 
} 

// ---------------- HTML - -------- //

<div id="header"> 
    Header 
</div> 

<div id="main-bets"> 
    Bets 
</div> 

<div id="fixed-wrapper"> 
    Wrapper 
</div> 

<div id="footer"> 
    Footer 
</div>