携帯電話/携帯電話専用のスティッキーdiv

Question

上には2つの部門があり、2番目の部門はユーザーがスクロールした後に固定されるはずですが、携帯電話でのみ行われます。

は、例えば、このを見てみましょう：https://jsfiddle.net/livibetter/HV9HM/

は、これは私が何をしようとしています正確に何ですが、私はこれが唯一の携帯電話のデバイスで発生します。デスクトップでは、部門は異なる動作をします。デスクトップ上の2つの部門は固定されているため、問題はなく、適切に機能しています。

私は除外1と2から固定を削除しました。ユーザーが除外2を渡すと、上記の例のように固定して動作させたいと思います。フィドル

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) { 
     $('#sticky').addClass('stick'); 
     $('#sticky-anchor').height($('#sticky').outerHeight()); 
    } else { 
     $('#sticky').removeClass('stick'); 
     $('#sticky-anchor').height(0); 
    } 
} 

#sticky { 
    padding: 0.5ex; 
    width: 600px; 
    background-color: #333; 
    color: #fff; 
    font-size: 2em; 
    border-radius: 0.5ex; 
} 

#sticky.stick { 
    margin-top: 0 !important; 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
    border-radius: 0 0 0.5em 0.5em; 
} 

body { 
    margin: 1em; 
} 

p { 
    margin: 1em auto; 
} 

Answer 1

から

サンプルコードは、必ず、以下の私の例として、これを達成するためにCSS側でメディアクエリを使用することができます。

@media screen and (max-width: 430px) 
{ 
.cssEntry { 
    background: pink; 
} 
} 

注：あなたがしていじくり回すことができますモバイルの幅は一般的に430pxで十分です。