Jump to content


Photo

Using Scrollspy???


  • Please log in to reply
3 replies to this topic

#1 ntsc2012

ntsc2012

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 15 August 2012 - 10:59 PM

Hello everybody, I know pretty much nothing about CSS and I was wondering how I could still use Scrollspy? I have one page on the website that has long-form content and I wanted to use scrollspy to streamline it and make it more user-friendly. Is there any ready-to-use CSS content that i could use to set up scrollspy without prior knowledge of CSS? Thanks a bunch!

#2 batman

batman

    Bat Learning

  • Members

  • 1768 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 August 2012 - 11:15 PM

Hi You have information in http://twitter.githu....html#scrollspy

#3 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 August 2012 - 12:25 AM

Hi there, there's not any pre-set content that I'm aware of. However scroll spy isn't as hard to activate as it sounds, so it's worth having a go to try and get it working on your site. If you check out our Demo at http://demo.pageline...ework/sections/ and scroll down, you'll see the scrollspy section is activated by simply adding .scroll-header as a class into your content. I'm not sure how you're formatted your content as I couldn't see which page you were making reference too etc. Go into edit the page you want the scrollspy to be active on and click on the 'html tab' on the right, above the main text entry field. You'll now see the html for your page content. Simple add the class .scroll header to the area of the page you want t to scroll down to, I've copied in the example from the demo below.

Your content here

Your content here



#4 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 18 August 2012 - 02:43 PM

Ya ignore that bootstrap link above, James is right on.

You can also add "page-header" to produce a styled heading. Ex

 <div class="scroll-header page-header" title="My Title"><h1>Title<small> and a tag line to boot</small></h1></div>