Streaming live at 10am (PST)

Pinning a nav bar from a specified page point on scroll


#1

Hi there,

I would really appreciate some help with some navigation functionality that I am trying to build.
The support team have tried to help but sadly Webflow doesn't support this and I've yet to find a work around.

What I want to do is create a secondary nav bar that is lower down the page (see the image attached) to pin to the top of the page ONLY once you have scrolled down past it. Once scrolled into this content the nav bar is pinned and each relevant navigation item highlights and can be anchored to each part of the page.

This is an example of someone who has created this in code: See link

Hope that makes sense and thank you to anyone who can help

Harmesh


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Harmesh This isn't yet possible to do natively in Webflow. But have you tried custom code?

Here is an article that may help:
http://www.hongkiat.com/blog/css-sticky-position/


#3

I did this on a site (I can't remember the webflow forum where I originally grabbed this from).

1) Assign the navbar the id of "myaffix"

2) Add this custom code to the head of that particular page:

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

3) Add this code to the custom code section of the site:

<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>

#4

How did you make out @Harmesh?


#5

@Harmesh

Is this what you're talking about? Scroll and you'll see the blue nav bar trigger another fixed nav bar. It's two different bars with the same links, but the user will experience it as the same bar.

I'm not sure if this is what you're looking for, but if it is, I'll share my webflow link so you can see the structure and interactions.

http://horizonstaging.webflow.io/k12schoolnutrition/onesource/home

P.S. If you click the "Solana" link, it looks broken, but it's not. There's just no Solana content on that page yet. I'm still building this site. :slightly_smiling:


#6

Thank you @PixelGeek, I will give this a try and let you know. Have yet to try custom code.


#7

Thanks @KProServices, where do you specify the page point where the nav is fixed?


#8

Hi @ctotty, thank you so much for the example. That is exactly what I'm looking to do along with highlighting the section of the nav that you are in. Feel free to say no, but could you please share with me a version of the working file? I just need to see how you built the interactions.
Many thanks,
Harmesh


#9

Here's my public link: https://preview.webflow.com/preview/horizonstaging?preview=0a6d36646617aa6f7103988eb54a4bde

Basically, the lower menu has absolute positioning at the top of the section near the middle of the page. It triggers the sliding down of the fixed menu hiding underneath the main menu header. So be aware of z-index levels.

My element naming is not real obvious to anyone but me, so I hope you can figure it out by looking at the structure.

Let me know if I can help.


#10

Nothing special. It was based on the position of the nav bar within the designer. In my case, I had a header section at 100% height and the nav bar below it... so you didn't see the nav bar until you started scrolling and once the nav bar hit the top of the screen it stuck. I am tied up right now but I will try and post a read only to the site I did it with later.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.