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.

I don't understand your question at all I checked your code and where's the problem or what do you need by saying `lock` ? please provide more information — Saber Hosney, Jan 04 '17 at 05:13
okay, Basically, I want my particular
to remain static ( which contains the date input type) when I scroll the page. This can be related to the same concept as - 'fix the navbar when we scroll the web page', but here it's not the navbar, it's the
element, which I want to remain when I scroll the web page. — Yash Jain, Jan 04 '17 at 05:21
what I understand is when user scroll down the `div` tag still in same place which called `sticky` if that I think I can help you — Saber Hosney, Jan 04 '17 at 05:25
Maybe you can check this out, the change only is, I want my
instead of navbar in the following example: [link](http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h) — Yash Jain, Jan 04 '17 at 05:28
I don't know the exact term for affix. if that's called `sticky` then I might've learned a new word, anyway can you help in this context? — Yash Jain, Jan 04 '17 at 05:30

Saber Hosney · Answer 1 · 2017-01-04T08:30:33.610

0

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%" );
    }
  });
});

edited Jan 04 '17 at 08:30

answered Jan 04 '17 at 05:43

Saber Hosney

112
1
12

I've tried the 1st solution, didn't worked for me. The second one did work, but it gets hide whenever some text is encounter.ed the date input gets hidden. – Yash Jain Jan 04 '17 at 05:54
https://jsfiddle.net/6wxchkkk/ , where's the problem ? you can add your full code on jsfiddle and I will check where's the problem – Saber Hosney Jan 04 '17 at 06:01
here's the link, my code does not work here. [link](https://jsfiddle.net/dbxaf8jb/) – Yash Jain Jan 04 '17 at 07:20
@YashJain see the update 1 , I think it solve the problem right ? – Saber Hosney Jan 04 '17 at 08:24
@YashJain pick what you need : update 1 or update 1.1 if it solve the problem accept the answer to move the question to answered section to help other users – Saber Hosney Jan 04 '17 at 08:32
can I know why this is didn't work with you ? i test it on JSFIDDLE . – Saber Hosney Jan 04 '17 at 22:47

heraldo · Answer 2 · 2017-01-04T06:11:13.790

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/

why this is also not working for me :( is there some issue for bootstrap files / Jquery files? — Yash Jain, Jan 04 '17 at 06:15
Yes, if this is not working, there's a problem with your setup. Make sure everything is included and loading properly. Check the console, are there any errors? The JSFiddle that I linked to works as it should, it has all of the bootstraps files correctly included. — heraldo, Jan 04 '17 at 17:11

score 0 · Answer 3 · answered Mar 07 '18 at 23:15

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.

Bootsrap Affix not working

3 Answers3

1

2

Update 1

Update 1.1