2016-10-06 5 views
1

divの下部にいくつかのコントロールがあります。ユーザーがスクロールしたときにこれらのコントロールを固定したままにしておきたい。bootstrap - 水平スクロールスクロールでdivを固定します。

enter image description here

私が試した: 1)のdivが固定作ります。その問題は、IDが私のブートストラップ属性を破壊し、高さが動的に生成されるためです。

<div id="timelineContainer"> 
    <p class="mes">{{mes1}}</p> 
    <div id='chart_div' class="chart"></div> 

    <div class="row fixedcontrols"> 

    <div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg"> 
     <button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records..."> 
     <span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button> 
    </div> 

    <div class="col-md-3 col-lg-3 col-xs-3 "> 
     <button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span> 
     </button> 
    </div> 

    <div class="col-md-3 col-lg-3 col-xs-3 form-group-lg"> 
    <button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button> 
</div> 

    <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff"> 
    <button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button> 
    </div> 
    <div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right"> 
    <button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span> 
    </button> 
    </div> 

    </div> 
</div> 



#timelineContainer { 

overflow-x: scroll; 
overflow-y: scroll; 
white-space: nowrap; border: 13px solid #bed5cd; 
width: 100%; 
margin: 0 auto; 
position: relative; 
background-color: #5bc0de; 
    } 

ありがとうございます。

更新: ユーザーが以下のようにスクロールすると、コントロールが移動します。私はそれらを修正したい。

enter image description here

アップデート:私は願っています

、私はあなたの質問から理解することができますどのような絵 enter image description here

+0

もっと説明できますか?実際に何をしたいのですか –

+0

ユーザーが左右にスクロールしたときにコントロールが固定されたままにしたい。現在、私がスクロールすると、コントロールがスクロールして、ユーザーはコントロールボタンを見ることができません。私のアップデートを見てください。 – vladimir999

+0

あなたはもう少しCSSを持っていますか?またはjs ??あなたはここに追加することを忘れていますか? –

答えて

1

は、ページ下部のあなたのdivの位置で固定することにしたいされましたCSSの小さな変更が問題を解決します

position: fixed !important;

もしあなたがそれを意味していなかったら、もっと説明してください!

+0

はい、私が必要とするものですが、問題はそれが私のブートストラップを台無しにすることです。私は質問を更新して結果を表示しました。 – vladimir999

0

コントロールの位置を絶対に設定し、その祖先がtimelineContainerのIDを持つdivであることを確認します。 absoluteは要素をその祖先に対して相対的に配置します。どこに移動してもdivに固定されます。

関連する問題