Bootsrap Affix not working

Question

I have added the library for Bootstrap and data-spy attribute where I want to make the div fix when I scroll the page down. But it doesn't work, I have almost tried everything, but not able to figure out the problem. Is is something like the data-spy attribute doesn't work on class = "row" ? Here's my code for HTML.

<div class="row">
           <h4> HEADING </h4>
           <h5>
            <div class="row" data-spy="affix" data-offset-top="10">
            dsds
                Date : <input type="date" name="graph_date" id="graph_date">
            </div>
            <div class="row">
                <div class="graph-hourly">
                    <div class="loader" id="chart_loader">
                        <p>Loading...</p>
                    </div>
                    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                    <div id="chart_hourly"></div>
                </div>
            </div>
       </div>

and some css :

.affix {
  top : 0;
  width: 80%;
}

after searching for some solutions, I've added this also,

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}

but this solution also dosen't worked for me.

Answer 1

First of all delete top:0; from affix class because it will make a issue for you.

now you have two methods pick a one :

1

adding data-spy="affix" which is works fine for me

2

same result ass data-spy but you will need some styling after you complete your page

by adding a position Property for input tag

as ex. : CSS:

sticky{
position:fixed;
}

and HTML :

<input type="date" name="graph_date" class="sticky" id="graph_date">

Update 1

this Jquery code can detect a scroll event so when user scroll down it will make the div tag sticky or "affix"

$(function() {
  $(window).scroll(function() {
    var aTop = "100";
    if ($(this).scrollTop() >= aTop) {
     $('#affix-this').css( "position", "fixed" );
     $('#affix-this').css( "top", "0" );
     $('#affix-this').css( "width", "100%" );
    }
  });
});

change the aTop variable with the height you want (in pixel) so when the user scroll down 100px the div become sticky

a JSfiddle example

Update 1.1

a bit smarter Jquery code do the same but get the height automatically from a another element this can be good if you format your page to something similar to this

$(function() {
  $(window).scroll(function() {
    var aTop = $('id').height();
    if ($(this).scrollTop() >= aTop) {
     $('#affix-this').css( "position", "fixed" );
     $('#affix-this').css( "top", "0" );
     $('#affix-this').css( "width", "100%" );
    }
  });
});

Answer 2

Not sure what the problem is in your case. I copied and pasted your code into a jsfiddle with the bootstrap library and the affix class did work. Though, it worked badly because it affixed the row right when you started scrolling.

Looks like Bootstrap doesn't have a way to set the offset to the current position of the element so I added the following javascript to make it work.

$('#affix-this').affix({
    offset: {
      top: $('#affix-this').offset().top
    }
 })

(#affix-this should be changed to the id of the row you want to affix.)

Note the $('#affix-this').offset().top. This makes sure the element gets affixed right when you reach the element's current position.

Second, I removed the html attributes that you had for the affixing.

<div class="row">
    <h4> HEADING </h4>
    <div class="row" id="affix-this">
        dsds Date :
        <input type="date" name="graph_date" id="graph_date">
    </div>
    <div class="row">
    <div class="graph-hourly">
      <div class="loader" id="chart_loader">
        <p>Loading...</p>
      </div>
      <div id="chart_hourly"></div>
    </div>
</div>

Notice the affix-this id was added to the row that you want to affix.

Here is a working JSFiddle with these changes so you can see it in action: https://jsfiddle.net/heraldo/6s4u26m3/4/

Answer 3

Make sure the element to which you're adding data-spy="affix has been created in the DOM before your Bootstrap scripts load. I ran into an issue where I was adding data-spy="affix" in my HTML, but it was wrapped up in a section that wasn't rendering, thanks to data-ng-if. My HTML was created after my Bootstrap had loaded, so the <div> I wanted to stick to the top of the screen never stayed in a fixed position. If you can, use data-ng-show, or something that merely hides HTML, rather than prevents it from being created on page load.