Jump to content

Archived

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

janpeeters

How keep scrollspy (spynav) centered when it locks to top of page

Recommended Posts

janpeeters+    31
janpeeters

Hi,

 

I'm trying to find out how I can keep the scrollspy centered on the page when it locks to the top of the page. In the current DMS/Bootstrap implementation the scrollspy jumps to the left. This is confusing for visitors because they have to refocus there eyes on a different spot.

 

Any help would be appreciated in how I can prevent the thing from jumping. You can see the effect here http://j.mp/15Zpyks

 

Thanks.

 

Jan

Share this post


Link to post
Share on other sites
Rob    547
Rob

Jan, I apologize.  I haven't tried ScrollSpy yet. It's on my hitlist for this weekend.

 

batman if you're experienced with this topic, please feel free to chime in.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
batman    389
batman

Hi jan

I´m not sure, but please, you can try with

 

 

#spynav.spynav.spynav-fixed {margin: 0px auto !important;}

 

I feel It's on my hitlist for this weekend too like Rob


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Rob and Batman,

 

thanks for helping out. I've tried your suggestion batman, but with no luck. I've staring in Chrome dev tools over de last ten minutes to changing CSS when it snaps and when it not. But I can't wrap my head around it. I've tried your suggestion also with spaces inbetween the ID's but that aso didn't so it.

 

Hope it will be a clear weekend regarding Spynav ;-)

 

Thanks again, Jan

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Going to be creating a page in the docs that will cover this, add the following to your custom CSS.

 

https://gist.github.com/Dannyholt/6492620


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Danny, 

 

Thanks for your code, but I'm sorry to say it didn't change the jumping to the left behaviour of the Spynav when locking to the top of the screen. I've added it to my child theme CSS but with no effect. I've deactivated my W3 Total Cache plugin (I thought maybe a caching issue) but that also wasn't the problem. Then tried to add it to my custom LESS file, but that one gave a compile error and finally I added it to the custom CSS in the page but also with no success.

 

Have you got an idea what I could be doing wrong? 

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Ah, my bad the code I gave was slightly incorrect. I have now updated, so try again and this will work, just tried on my test site.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Danny,

 

Thanks a lot, it works now. The only thing is that it still jumps a bit to the left, maybe 8px or so. Do you have an idea how I can deal with that too? The site I'm working on is at http://www.lovo.nu/welkom-2

 

Thanks,

 

Jan

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thats not occurring on my test site, therefore its related to either your own custom css or you have added an offset to ScrollSpy to make it look as though its centred.

 

You will want to remove this offset and view the code I gave you above and use this to style the normal view of ScrollSpy so that your menu items are centred there too.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Danny, that worked perfectly. Only had to remove the '-fixed' extension from the spynav ID and all worked well. Thanks.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Buishi
      By Buishi
      Hi there,
       
      I'm having the following problem: I set up a scroll spy on my homepage, and put several sections throughout the homepage with .scroll-headers (for example: <h4 class="scroll-header" title="Testimonials">Testimonials</h4>). The problem is, the menu highlighting doesn't change as I scroll, only the last menu item remains highlighted. Any idea what's going on? See here:
       
      http://designmancan.com/CLL/
    • Buishi
      By Buishi
      I could have sworn I read in the documentation somewhere about creating a scroll-spy link using HTML (something like <a href="somesection" rel="scroll-spy" class="btn">button</a>), but I can't find it where I expected to. Is this possible? Basically, I want to use scroll spy from the main menu, instead of a separate scrollspy section. Possible, or do I need a different plugin?
    • seatangltd
      By seatangltd
      Hi,
       
      I'm having an issue with the scrollspy section. When I click on one of the buttons, it brings me down to the relevant content, but in the middle of the header text (which contains the scrollspy tags) as shown: http://grab.by/wNri
       
      The page should scroll down to just above the header text something like this: http://grab.by/wNta
       
      I know that scrollspy isn't meant for use with sections, but I tested it with content inside a single text box and had the same issue.
       
      http://cavistons.com/food-emporium/cheese/
       
       
    • ketri
      By ketri
      Hello

      If I understand http://docs.pagelines.com/tutorials/using-scrollspy this correctly, then I'm supposed to implement the scrollspy-navigation section to a page, and then write the page content in the WordPress admin-panel, and to the content of the site create sections for the scroll spy like:
       
      <h4 class="scroll-header" title="Setup"></h4> <p>Your content here</p>  
      Or possibly use a text box -section where I can write scrollspy-compatible html myself.

      As I can set the css-classes needed for scrollspy to my DMS sections easily, is it possible to also add the title so I could just drag & drop a landing page that scrolls to different sections? so I could use the scrollspy to scroll to i.e. specific section in my page like Column that has content inside it, or scroll to a fullwidth slideshow etc?

      Thank you


       
    • janemackey
      By janemackey
      Hello,
      I am thinking about switching from a fixed nav bar at the top of my website to using scrollspy. I understand how to do the basic implementation from the documentation but I have a few questions.
       
      1) On a mobile device, it seems like the scrollspy navbar doesn't stay at the top with the small menu icon that I had when using the fixed navbar. How can I get this to work?
       
      2) How can I put my logo in the scrollspy navbar?
       
      ) How can it be full width the whole time instead of only when you start scrolling?
       
      This is all similar to wndrmnt.com that is used as an example of how one can use scrollspy navigation.
       
      And I assume scrollspy should be at the top of the content/template area and not in the header area.
       
      thanks for any help,
      jane
×