react-scrollspy icon indicating copy to clipboard operation
react-scrollspy copied to clipboard

Add offset for content

Open blueprintChris opened this issue 5 years ago • 3 comments

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 avatar Jun 13 '19 10:06 blueprintChris

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?

blueprintChris avatar Jun 13 '19 12:06 blueprintChris

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.

laurencefass avatar Jul 10 '19 10:07 laurencefass

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

fadlystwn avatar Apr 30 '20 20:04 fadlystwn