Twitter Bootstrap modal opening/closing causes fixed header to jump

Question

I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can\'t seem to fix: a jumpy header when a Twitter Bootst

Answer 1

I manually change bootstap.js:

before change

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
  }

after change:

  Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
    if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
    $('.navbar-fixed-top').css('padding-right', '')
  }