kimyvgy / simple-scrollspy

Simple scrollspy without jQuery, no dependencies
https://kimyvgy.github.io/simple-scrollspy/
MIT License
79 stars 23 forks source link

New option offset for section #28

Closed projct1 closed 3 years ago

projct1 commented 3 years ago

I have sticky horizontal panel https://skr.sh/sAbFQJdT4g4, but she overlaps my header section https://skr.sh/sAbTtGZONrn. So, need new option offset equals height of this panel.

kimyvgy commented 3 years ago

@projct1 Could you please give me the link to Codepen (something like that) or explain to me how to reproduce this issue?

projct1 commented 3 years ago

@kimyvgy https://codepen.io/projct1/pen/eYEeQvY After click on navigation item, i cant see header of section.

kimyvgy commented 3 years ago

@projct1 Thanks for your link. In this case, a simple way is only to increase the offset value. May you try it?

projct1 commented 3 years ago

@kimyvgy The offset parameter is not for this case. It is for activating the navigation class, not for displacement when scrolling. In my case, when i click to navigation link, i need to scroll to section position minus height of my height navigation.

kimyvgy commented 3 years ago

@projct1 Oh, I got it. If you want the offset when you click to navigation link, you can try the smoothScroll feature.

import jumpTo from 'jump.js'

scrollSpy('#main-menu', {
  // ....,

  // enable smooth scroll:
  // - true: enable with the default scroll behavior
  // - false: disable this feature
  // - object: enable with some options that will pass to `Element.scrollIntoView` or `smoothScrollBehavior`
  //   + Default behavior: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  //   + Jump.js: https://www.npmjs.com/package/jump.js
  smoothScroll: true,

  // customize scroll behavior,
  // - default: Element.scrollIntoView({ ...smoothScroll, behavior: 'smooth' })
  // - customize: you can define your scroll behavior. Ex: use `jump.js`, jQuery, .etc
  smoothScrollBehavior: function(element, options) {
    // use `jump.js` instead of the default scroll behavior
    jumpTo(element, {
      duration: 300,
      offset: -100,
    })
  }
})
projct1 commented 3 years ago

@kimyvgy Ok, big thanks :D