Scrollspy not working when extra <section> added

Scrollspy not working when extra <section> added
0.0 0

#1

Hi there,

I am going through the portfolio project and have come across a stumbling block.

here is the code without the section.

Here is the section I want to add: https://codepen.io/samrbrown/pen/pVEdXo

Any help would be great. I can’t seem to spot anything to suggest why it should not work when this is added.

Cheers!


#2

Do you have a pen where you have actually instantiated that code and show that it’s not working? You just have to make sure that you have it properly set up. If you can set it up and post a link that it will be easier to check what’s going on.

Regards,
Ken


#3

I have updated the pen!

If the section with the ID contact is taken out, then it works how I want.


#4

The pen looks like it is working - the “Contact” link highlights when the “Contact” section scrolls into view?

But it does seem that if you click on the “Contact” link, it scrolls to that section and does not highlight the link in the navbar? That’s a little strange.


#5

I probably should have worded this better, haha!

If you scroll right to the top, the ‘Home’ link doesn’t highlight, but take out the ‘contact’ section and it works as it should.


#6

One thing that I can see is that you have this code:

<body data-spy='scroll' data-target='#portfolio-nav' data-offset='100'>

in your HTML panel, and that’s making multiple <body> elements in your final HTML output, because CodePen already has the body element in the template. That might be causing the problem?


#7

When I use dev tools, the body tags I have added and the one already created by CodePen seem to be combined, so I don’t think it is this. I have also tried using div and main element, but things go sideways with those. Scary.

very weird in my eyes!


#8

I tried this:

  1. Remove that body element (and closing tag) from the HTML panel
  2. add this code into the JS panel,
  $('body').attr({
    'data-spy': 'scroll',
    'data-target': '#portfolio-nav',
    'data-offset': 100
  });

That puts those attributes on the body element. And it seems to be working better?


#9

I forked and saved the pen that I made the changes to: Updated SamRBrown portfolio pen fork

Update: Well, I thought it was working but now it doesn’t seem to be working? Curious…


#10

Thanks for the help!

I have found the source of the problem. The iframe which I use for the google map.
Now to troubleshoot why that happens…

EDIT: The JS you wrote didn’t seem to work for me!


#11

Oh, I see that I had a typo in the data-target - I’m trying it again with that change. Just re-saved my pen. And updated the comment above to have the correct spelling of #portfolio-nav

It seems to work for all of the sections, except for clicking on Home… and it also seems to be a little wonky with clicking on “About” and “Work” - it’s like it overshoots the section and then comes back?


#12

I just don’t understand how the iframe in the contact section seems to break Scrollspy!


#13

I think that I finally got it working - there was strange stuff going on with the way it would scroll and then jump - so I updated my fork of your pen

I added a CSS padding-top for the <section> elements, and took away the -100 from your calculation for scrollTop. See if you think that it is working. My pen still has your iframe in there.