CODEWITHSUNDEEP
javascripttwitter-bootstrapcss
loretoparisi
loretoparisi

Reputation: 16281

Bootstrap floating panel

I have designed a Bootstrap two column layout col-md-6. A row with a panel on top with a table, a left column panel with a list of media items, and a right column with a panel hat contains text.

enter image description here

The contents are in a container-fluid layout. When scrolling the page, while the left panel <ul/> list can scrolls down, the right column panel will disappear from the view.

I want to keep this panel-text stuck to the viewable area below the panel-summary. I have applied a fixed position with a translateY(0px); transform to the row containing that panel:

.row-floating {
    position: fixed;
    margin-top: 0px;
    top: 60px;
    transform: translateY(0px);
}

The problem is that, while scrolling the panel-text will overrides the panel-summary anyways, while it should stay stuck below this panel:

enter image description here

JSFiddle here.

The solution proposed works, so I have updated the Fiddler here adding

a offset from top to keep the panel at bottom of the navbar (+44px):

$('.panel-floating').css('position', 'fixed').css('top', 44.0).css('width',actualWidth);

Upvotes: 1

Views: 7342

Answers (1)

karthick
karthick

Reputation: 12176

What you are looking for can't be done in css alone you have to use JS. Since you are using bootstrap. I am including jquery

$(document).ready(function(){
    var offsetTop = $('.row-floating').offset().top;
  var actualWidth =$('.row-floating').width(); 
  $(window).scroll(function() {
    if( window.pageYOffset >= offsetTop){
        $('.row-floating').css('position', 'fixed').css('top', 0).css('width',actualWidth);
    } else {
        $('.row-floating').css('position', 'relative').css('top', 'auto').css('width','auto');
    }
  });
});

Fiddle for the same https://jsfiddle.net/karthick6891/5je5d18g/5/

Upvotes: 3

Related Questions