Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Affix not working when <html> is not scrollable #22142

Closed
DumboJet opened this issue Mar 9, 2017 · 4 comments
Closed

Affix not working when <html> is not scrollable #22142

DumboJet opened this issue Mar 9, 2017 · 4 comments
Labels
js v3

Comments

@DumboJet
Copy link

DumboJet commented Mar 9, 2017 •
edited
Loading

In my web page I have this CSS:

html {
    overflow: hidden;
}
body {
    overflow: auto; // Body has scrollbar
}

Apparently it makes the affix functionality break.
One reason seems to be that the events are registered on the window:

    this.$window = $(window)
      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))

Is there any way to make this work when only the body is scrollable?
(Or more general, when a custom element is scrollable)
I am not sure what are the best practices here, but having the <html> element scroll seems a bit weird to me.

(I use Bootstrap v3.1.1)
@Johann-S
Copy link
Member

Johann-S commented Mar 9, 2017

Support for v3 has mostly ceased. (See #20631)
Please let us know if this issue affects v4.

@DumboJet
Copy link
Author

DumboJet commented Mar 9, 2017

Hm...
I don't have v.4 in any project. :(
I will see what I can do...

@mdo
Copy link
Member

mdo commented Mar 11, 2017

Closing given v3 status.

Bootstrap 3 is essentially in maintenance mode as we focus on working towards a stable v4. As such, we're only accepting changes to v3's code on a case-by-case basis, usually only for critical bug fixes or docs improvements.

Sorry for the inconvenience, and thanks for the suggestion, but we'll be passing on this change.

<3

@mdo mdo closed this as completed Mar 11, 2017
@Akeri
Copy link

Akeri commented Jan 28, 2019

For anyone still dealing with this.
Use 'target' option to specify the scrollable container

$('#scrollable').affix({
  target: 'body'
});

Refer to: https://getbootstrap.com/docs/3.4/javascript/#affix-options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js v3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mdo @Johann-S @Akeri @DumboJet