Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Scrollspy problem


Question

Posted · Report post

Hi

I'm using the Scrollspy section on one of my pages. The action works great, whizzing down to the relevant section of the page and back, the menu sticking to the top of the page. My problem is that the highlight of the 'current' section (which I have styled orange). As soon as you scroll down the page the last button get the current styling, which then stays...

The custom css styling hasn't caused this, as it happens with or without.

This is the relevant page

thanks

kk

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

Hello?

Wondering if anyone would like to chime in here? After all, this relates to an issue that is not working on your own Demo page?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I'm glad this worked for you. As the last question about the transparent bg has been answered in another thread, I'll resolve this thread for you.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

thanks for that. I had a look, but that post at stackoverflow had a variety of answers, none of which seem relevant here, as I'm using the Pagelines section to create the Scrollspy, not coding it myself.

Interestingly I found the following. I had downloaded the entire Demo settings and content from the Goodies section and applied it all to my site (which was fun!!), and then used the 'Sections' page as the template for creating my 'Facts' page. I left the scrollspy coding as it was and added the content.

Anyhoo, I went to the Pagelines demo Sections page and the 'active' state of the Scrollspy navbar isn't working there either! It is working on the Pagelines demo Tools page...... as far as I can see the main difference between those two pages is that on the 'Tools' page all the Scrollspy nav links are continuous in the main content, and on the 'Sections' page they are spread over a series of content boxes. Could that have something to do with it?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

The issue as far as I can see, is that the Scroll Spy was designed to target content on a page/post and not individual sections. I have set myself to follow this topic and will speak to one of our developers but I have a feeling that he may say the same thing I said and that it wasn't designed to target sections.

I will keep you posted!

Share this post


Link to post
Share on other sites

Posted · Report post

Fair enough. I thought it had to be that, which is why it doesn't work on the Pagelines Sections demo page either. Shame, coz on a page like that one, with lots of different sections is the perfect place to use Scrollspy. I like having the content on a long page rather than multiple pages.

As a workaround, is there any way to implement sections inside the main body content? Things like quicksliders and boxes? I'm guessing not...

Share this post


Link to post
Share on other sites

Posted · Report post

Do you mean add sections inside your page templates content area ?

If so, yeah all you need to do is add click on Content Area instead of Page Template in Drag and Drop.

http://d.pr/i/odRv

Share this post


Link to post
Share on other sites

Posted · Report post

ehrm... I feel a bit stupid now! I knew that one :huh:

Share this post


Link to post
Share on other sites

Posted · Report post

Fixed! By adding content boxes to the Content Area section of the template rather than the Page template, the scrollspy works beautifully. Thanks for sending me down that path. Related to an earlier post you answered about transparent background on the blog page, I'm trying to get the background of the page transparent too. I modified the custom css thusly:

.blog #site #pagelines_content, .4 #site #pagelines_content {

background: transparent;

border-color: transparent;

}

but that doesn't work...

Share this post


Link to post
Share on other sites