Scrolling Navbar that Sticks

[vernon]

I would like to make a section at the top of the page which would contain a thick banner and below that a navbar that would be very thin. I would like the banner to scroll out of view when scrolling down, but the navbar to remain at the top. Is there a video that shows how to do this?

[AlanBorger]

You can simulate this effect on webflow with a duplicated navbar element and some interactions.

Create two navbar elements, one should be fixed and the other one you’ll place on your “cover section”;

Create an interaction assigned to your second section affecting your two navbars to show and hide them accordingly as you go past the cover section, into your second section (hero…).

Or you can also do it with some custom code by following these 4 (pretty straight forward) steps.

STEP 1

Copy and paste this into your < head > tag custom code area:

(remove all spaces inside < style_> and < /style_> )

<style >
.w-nav.affix {
position: fixed;
width: 100%;
top: 0px;
z-index: 999;
}
</style >

---

STEP 2

Create an HTML embed element where you will paste the following:

(remove all spaces inside < script_> and < /script_> )

< script>
window.onload = function () {
/* ========================================================================

• Bootstrap: affix.js v3.0.0
• http://twbs.github.com/bootstrap/javascript.html#affix
• ========================================================================
• Copyright 2013 Twitter, Inc.
• Licensed under the Apache License, Version 2.0 (the “License”);
• you may not use this file except in compliance with the License.
• You may obtain a copy of the License at
• http://www.apache.org/licenses/LICENSE-2.0
• Unless required by applicable law or agreed to in writing, software
• distributed under the License is distributed on an “AS IS” BASIS,
• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
• See the License for the specific language governing permissions and
• limitations under the License.
• ======================================================================== */

+function ($) { “use strict”;

// AFFIX CLASS DEFINITION
// ======================

var Affix = function (element, options) {
  this.options = $.extend({}, Affix.DEFAULTS, options)
  this.$window = $(window)
    .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
    .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))

  this.$element = $(element)
  this.affixed  =
  this.unpin    = null

  this.checkPosition()
}

Affix.RESET = 'affix affix-top affix-bottom'

Affix.DEFAULTS = {
  offset: 0
}

Affix.prototype.checkPositionWithEventLoop = function () {
  setTimeout($.proxy(this.checkPosition, this), 1)
}

Affix.prototype.checkPosition = function () {
  if (!this.$element.is(':visible')) return

  var scrollHeight = $(document).height()
  var scrollTop    = this.$window.scrollTop()
  var position     = this.$element.offset()
  var offset       = this.options.offset
  var offsetTop    = offset.top
  var offsetBottom = offset.bottom

  if (typeof offset != 'object')         offsetBottom = offsetTop = offset
  if (typeof offsetTop == 'function')    offsetTop    = offset.top()
  if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()

  var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
              offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
              offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false

  if (this.affixed === affix) return
  if (this.unpin) this.$element.css('top', '')

  this.affixed = affix
  this.unpin   = affix == 'bottom' ? position.top - scrollTop : null

  this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))

  if (affix == 'bottom') {
    this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
  }
}

// AFFIX PLUGIN DEFINITION
// =======================

var old = $.fn.affix

$.fn.affix = function (option) {
  return this.each(function () {
    var $this   = $(this)
    var data    = $this.data('bs.affix')
    var options = typeof option == 'object' && option

    if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
    if (typeof option == 'string') data[option]()
  })
}

$.fn.affix.Constructor = Affix

// AFFIX NO CONFLICT
// =================

$.fn.affix.noConflict = function () {
  $.fn.affix = old
  return this
}

// AFFIX DATA-API
// ==============

$(window).on('load', function () {
  $('[data-spy="affix"]').each(function () {
    var $spy = $(this)
    var data = $spy.data()

    data.offset = data.offset || {}

    if (data.offsetBottom) data.offset.bottom = data.offsetBottom
    if (data.offsetTop)    data.offset.top    = data.offsetTop

    $spy.affix(data)
  })
})

}(window.jQuery);

// Apply affix to element
$affixedElement = $(‘#myaffix’);
$affixedElement.affix({
offset: {
top: function () {
return (this.top = $affixedElement.offset().top);
}
}
});
};
< /script>

(just paste this whole thing in there)

---

STEP 3

Add at first and always make sure you have your navbar id set to “myaffix”
(if you change this id, make sure you have it set up accordingly on all snippets of code)

---

STEP 4

Create a symbol and make sure you have all these elements set up on every page you want this navbar to behave like this.

hope that helps…