2016-11-30 6 views
0

スクロールでdiv要素を上に固定します。 私は、次のコードでこれを達成している:ブートストラップはdiv要素を上に固定してサイズ変更を防ぎます

Javascriptを:

$(function() { 
var msie6 = $.browser == 'msie' && $.browser.version < 7; 
if (!msie6) { 
    var top = $('#betslip').offset().top - parseFloat($('#betslip').css('margin-top').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 
     $('#betslip').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('#betslip').removeClass('fixed'); 
    } 
    }); 
} 

CSS:

#betslip.fixed { 
    position: fixed; 
    top: 0; 
} 

HTML:

<div class="col-md-12" id="betslip"> 
... 
</div> 

問題があり、そのdiv要素をスクロールしながら要素が大きくなっています。どのように私はこれを修正/防止することができますか?ここで

は後にして、スクロールする前にスクリーンショットを次のとおりです。

enter image description here

答えて

0

それはコンテナの幅を無視しますposition: fixed;#betslipに追加することによって。 width: inherit;#betslipに固定してください。固定

+0

幅を継承しました:継承すると、divは以前と同じくらい明るくなりませんが、それでも元のサイズではありません。私は固定クラスにもいくつかのcol md-6クラスを追加しようとしましたが、効果はありません:( –

+0

html + cssコードなしでそこで何が起こっているのか理解するのは難しいです。 – het0

関連する問題