1つのdivの固定位置にあるボタン

2つのdivを作成しました.1つは上部に、もう1つは下部に作成しました。ボタンを1つ作成しました。私は左下のページに固定位置としてプロパティを与えました。ページをスクロールすると、ボタンはその位置に固定されます。基本的にボタンはページ全体の固定位置にあります。私の条件：ページをスクロールするとき、ボタンは特定の高さだけ固定する必要があります。ページをスクロールするとき、最初のdivの下の行がボタンの下の行に接触するまで、ボタンは左ボタンで固定する必要があります。とwen私はボタンが最初のdivの一番下の行と共に移動するはずのページをスクロールします。1つのdivの固定位置にあるボタン

基本的にボタンは最初のdivの最終行までの固定位置にある必要があります。最初のdivの下の行がボタンのボトムラインで崩壊するとき、ボタンは相対/絶対でなければなりません。

私の要件を理解していただきたいと思います。以下は、私はこれが唯一cssでは不可能だと思う要件


 

 
    #top { 
 
    border: 1px solid black; 
 
    height: 900px; 
 
    width: 80%; 
 
    position: absolute; 
 
} 
 

 
.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    bottom: 0px; 
 
    font-size: 16px; 
 
    margin-left: 0px; 
 
    cursor: pointer; 
 
    padding: 10px 24px; 
 
    position: fixed; 
 
} 
 

 
#bottom { 
 
    border: 1px solid black; 
 
    height: 900px; 
 
    width: 80%; 
 
    top: 910px; 
 
    position: relative; 
 
} 
 

 
#middle { 
 
    bottom: 50px; 
 
    position: fixed; 
 
}

<html> 
 

 
    <body> 
 
    <div id="top"> 
 
     <div id="middle"> 
 
     <button class="button">Fixed Element</button> 
 
     </div> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    <div id="bottom"> 
 

 

 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-07-26 Aryan

位置固定は、このquesiton上のいくつかの有用なヒントがあるビューポートを基準とします。http： //stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parあなたは役に立つと思うかもしれません。 – connorb

を探していたために私のコードです。 javascriptまたはjqueryが必要です。私の例を実行するにはjqueryが必要です。私はあなたのコードのcssとhtmlを変更した

のjQuery

$(window).scroll(function() { 
    if (($(this).scrollTop()+$(window).height())>$('#top').height()){ 
    $("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" }); 
    }else{ 
    $("#btn_fixed").css({ bottom: '0px' }); 
    } 
});

：あなたtopまたは他の要素とスクロール量を測定し、それに応じて次のようにボタンの上部/底部を変更する必要があります。

CSS

#top { 
    border: 1px solid black; 
    height: 900px; 
    width: 80%; 
    position: absolute; 
} 

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    bottom: 0px; 
    font-size: 16px; 
    margin-left: 0px; 
    cursor: pointer; 
    padding: 10px 24px; 
    position: fixed; 
} 

#bottom { 
    border: 1px solid black; 
    height: 900px; 
    width: 80%; 
    top: 910px; 
    position: relative; 
}

HTML

<div id="top"> 
    <div id="middle"> 
    <button class="button" id="btn_fixed">Fixed Element</button> 
    </div> 
</div> 

<br> 
<br> 
<div id="bottom"> 


</div>

の作業フィドル：https://jsfiddle.net/khairulhasanmd/h9y0bf1g/

出典

2016-07-26 11:57:01

ありがとう "Javascript"を使ってこれを解決できますか？ Jqueryの代わりに私は多くを助けるだろう。 – Aryan

「javascript」での実装では、より多くの行のコード、イベントリスナe.t.cが必要になります。 Googleを検索して自分で変換することができます。これが役立つ場合は、この回答に合格とマークすることができます。ありがとう。 –

1つのdivの固定位置にあるボタン

答えて

関連する問題