Scroll to Div id + a certain amount of pixels

Hey Everybody!

I have created a sticky header on my site using JQuery that works great. The header (really a navigation menu) loads at the bottom of the page, and as the user scrolls down the header then sticks to the top of the page.
Everything with this works great. But, where I am now having trouble is scrolling to the individual div id’s when the nav links are clicked. When the user clicks on a navigation button, it does scroll to the top of that specified div, as it should. But, I now have a header stuck to the top, which has a higher z-index, and therefore covers the top portion of that div that was just scrolled to.

My question is this, does anyone know what to change in the webflow.js file that would cause the scrolling function to scroll to a particular id + 66px? I have done some research and found some solutions, but they require new code and are redndant. I am confident there is a way to add something similar to “+ 66” within the existing code to accomplish this, but my JS skills are not very strong.

Anyone have any ideas?

Thanks!
-Beau

We ran into this problem and made it work for fixed headers, but not sticky headers. I’m pinning @callmevlad because he might be able to help you out.

Hey @Beau, that’s relatively straightforward. If you look in the latest version of webflow.js, there’s a line there that auto-detects a fixed header and determines its height:

offset = fixed ? header.outerHeight() : 0;

You can simply add another line after it, something like this:

offset = 66;

Also, if you change HTML tag of your sticky header to <header>, then webflow.js should auto-detect its height and scroll past it. Let me know if that works for you.

1 Like

Thanks for the speedy responses!

I tried wrapping the header in <header> tags but that did not seem to work, it did work however when I specified the header by its id #header.

I have one last kink that I need help with. The scroll offset works well when navigating to and from sections with “fixed” headers. Which makes sense as the webflow.js file accommodates that.
I am now running into an issue navigating to or from sections with a “static” header, which is the first and second sections.
This is the sticky header Jquery.

$(function(){
       var stickyHeader = $('#header').offset().top;
      
       $(window).scroll(function(){
             if( $(window).scrollTop() > stickyHeader ) {
                $('#header').css({position: 'fixed', top: '0px',});
            } else {
                $('#header').css({position: 'static', top: '0px'});
             }
     });
   });

And this is the section of the webflow.js file that is causing issues:

// Adjust for fixed header
var header = $('#header'),
  header = header.length ? header : $(doc.body).children(':first'),
  h = header.length ? header.get(0) : null,
  styles = null;

if (h) {
  if (w.getComputedStyle) {
    styles = w.getComputedStyle(h, null);
  } else if (h.currentStyle) {
    styles = h.currentStyle; // IE8
  }
}

var fixed = styles && styles['position'] == 'fixed',
  offset = fixed ? header.outerHeight() : 0;

;

I tried mimicking the fixed var (just above) by making an equivalent static var. Like so:

var stat = styles && styles['position'] == 'fixed',
  offset = stat ? header.outerHeight() : 0;

This solved the offset issue, but killed the “smooth scrolling”.

Any idea how to fix this?

@Beau,

you did this?

1 Like

I did not use WebFlow’s feature to tag it. My site has already been exported and modified with some other functionality and is “post” WebFlow. I did wrap it in <header></header> and was able to load the page and see that the div was indeed recognized as the HTML5 header though.

That is working though, I just modified the the JS to accept the id “#header” instead of looking for the HTML5 header tag.

Ok but you still have an issue with the smooth scrolling now? I’d look at “offset”, the second definition overwrites the first maybe?