Offset from top

[khromov]

Any way we can get a backport of the feature to work in 3.0.0? So that when you click a link there is some offset to the top of the screen to account for absolute positioned top menu.

Or, can we get an example of the "negative top margin" trick mentioned here: #83 ?

I think even though the feature doesn't work with all options, it should still be available with a warning.

[davist11]

http://davist11.github.io/jQuery-One-Page-Nav/top.html

[khromov]

Hi,

This does not work for my use case. My content is dynamically generated by the user using a content builder, so I can't just put paddings on all the elements because they don't have consistent classes.

Any other workaround? Even hacky ones accepted.

[davist11]

Got a link?

[khromov]

Not live at the moment.

I ended up modifying the source to hard-code an offset, on row 205:

scrollTop: (offset - 110)

Seems to work fine without any additional options.

[danny-englander]

I just ran into this issue as well with 3.0. scrollTop: (offset - 110) seems to work fine. I tried the padding / negative margin CSS trick and it just did not work for my use case but I hate to have to modify the core code.

[khromov]

Same reason I did it - sometimes your HTML is not setup in a way to allow for the padding / negative margin trick, and it's unnecessary to write a wad of markup/CSS when the solution is so simple.

[danny-englander]

@davist11 btw, thanks for this awesome plugin, I am having a lot of fun integrating it with a new Drupal 8 site I'm creating.

[renanlara]

@khromov Thank you!

[ghost]

As I am using this in one page navigation I have to have some space in each container (offset). But I got not configuration to do that. It was working with 2.00 version. I need it in this version.

Can anybody please let me know if there any way to offset container while jQuery-One-Page-Nav activate?

[davist11]

@codergens can you clarify what you mean?

[cseelus]

Changed line 205 from

scrollTop: offset

to

scrollTop: (offset - this.config.scrollOffset)

and added scrollOffset to my config like this:

var top_offset = $('header.navbar').height() - 1;  // get height of fixed navbar

$('.active-parent .dropdown ul').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 500,
    scrollOffset: top_offset,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
}); 

@davist11 Really nice plugin, afaik it must be the most used drop-in solution for One Page Navs.
Would it be possible to add this.config.scrollOffset to jquery.nav.js? Could open a pull request if that helps.

[davist11]

There used to be a scrollOffset, but it was removed in favor of a CSS only solution. http://davist11.github.io/jQuery-One-Page-Nav/top.html

[cseelus]

Yeah I used that, but ran into problems because the paddings of the sections with IDs in my current project are of dynamic/different size for each section.
Setting the default value für scrollOffset to 0 would give users both options to achieve an offset without having to manipulate jquery.nav.js itself (not update-proof, etc.).

Was there a problem with the scrollOffset config option or is this just a matter of taste?

[khromov]

👍 on @cseelus suggestions. Since I opened the ticket, I have used this plugin with scrollOffset on multiple sites without any issues. Why not just make it an optional config flag and most people won't use it, but those who need it will. :)

[davist11]

The padding/margin solution has no affect on the spacing of the actual section. If you use scrollOffset and changeHash, it doesn't work because when you change the hash, you get moved down directly to the section, so that's why it was removed.

[khromov]

@davist11 That's true, but some people don't use changeHash. The padding/margin method is not very user-friendly - it forces users to change markup for the sake of this plugin instead of being "plug and play".