makotot/react-scrollspy

Add offset for content

blueprintChris opened this issue · 3 comments

blueprintChris commented

Hi,

I have a fixed navbar at the top of my page. My content is on the left and my scrollspy is on the right. When I click on an element in scrollspy, my content scrolls to the correct id but the top bit of it is hidden by my nav bar. Offset doesn't work because it only offsets the scrollspy list.

Any ideas?

blueprintChris commented

Adding padding-top to my anchor element really messes with my design. Adds too much white space. Any suggestion? Can you add a topOffset which takes a value and use that value to scroll that many pixels away from the top of the window?

laurencefass commented

have you tried adding padding-top and negative margin-top? its worked quite well in a few cases for me. also find adding margin-bottom on items preceeding them eliminates overlap.

  • 👍1
  • 🎉1
  • ❤️1
  • 🚀1
fadlystwn commented

it's been a long time question, but I'm trying to help here.

I put the anchor on the section then hiding it with this stye

.anchor { display: block; position: relative; visibility: hidden; top: 100px; }
you can adjust the top both positive or negative value

  • 👍1