Brian and Eric: thanks so much for your help. Brian, I will definitely try
your suggestion with affix.
Here is a page that uses something other than affix to get it sticky. Notes
are on the page. It works almost exactly as intended. I'd much rather get
it working leveraging bootstrap so I'm gonna move onto that next.
http://francis.beta.libguides.com/sticky-left-nav-nonaffix
If/when I get it 100% working (and with affix) I will share with the group.
(That is, if I haven't had to clamor for help between now and then lol)
On Tue, Nov 18, 2014 at 3:45 PM, Brian Zelip <[log in to unmask]> wrote:
> Brad, Eric is on the right track above. The problem is absolute positioning
> (of which fixed positioning is a subset) removes the element from document
> flow and sets it in proportion to the viewport width.
>
> You'll have to add a fixed width to your unordered list, but more specific
> than 25%. Try adding the rules below to your internal styles (the `/*
> bootstrap overrides */` section of the html). (Be sure to keep the order
> provided here.)
>
> The next version of Bootstrap will change hard px values for rems!
>
>
> @media (min-width: 992px) {
> .affix {
> width: 220px;
> }
> }
> @media (min-width: 1200px) {
> .affix {
> width: 270px;
> }
> }
>
>
> Cheers,
> Brian Zelip
> ---
> MS Student, Graduate School of Library & Information Science
> Graduate Assistant, Scholarly Commons
> University of Illinois at Urbana-Champaign
> zelip.me
>
> On Tue, Nov 18, 2014 at 2:03 PM, Eric Phetteplace <[log in to unmask]>
> wrote:
>
> > When the <ul> goes to position: fixed it loses the width of its parent
> > (which has a "col-md-3" class) which is why it's smaller. If you can get
> > the "affix" class to act like "col-md-3" that'd help some, so:
> >
> > .affix { width: 25%; }
> >
> > is a start on large screens, but won't solve the way the <ul> ends up
> > behind your main content on smaller screens.
> >
> > Best,
> > Eric
> >
> > On Tue, Nov 18, 2014 at 11:35 AM, Brad Coffield <
> > [log in to unmask]
> > > wrote:
> >
> > > Brian,
> > >
> > > Awesome, thanks a lot.
> > >
> > > Of course in all my back and forth I didn't have it setup like I had.
> I'd
> > > gone back to scratch to try again. So, I just added the data-spy option
> > to
> > > the UL in the template that is the nav. The problems that are happening
> > > with it on this page aren't exactly as described in my previous email
> but
> > > still, there be problems :) The offset doesn't work at all. Not sure
> what
> > > css to include to make it work right. And it gets skinny on scroll now,
> > not
> > > wider.
> > >
> > > http://francis.beta.libguides.com/c.php?g=9436
> > >
> > >
> > > Thank you!!!
> > >
> > > On Tue, Nov 18, 2014 at 2:22 PM, Brian Zelip <[log in to unmask]> wrote:
> > >
> > > > Brad, publish a dummy draft page with the left-nav template and the
> > > problem
> > > > you're encountering so I can take a look.
> > > >
> > > > brian
> > > >
> > > > On Tue, Nov 18, 2014 at 1:13 PM, Brad Coffield <
> > > > [log in to unmask]>
> > > > wrote:
> > > >
> > > > > Has anyone endeavored to get this to work? If not, is there anyone
> > > > willing
> > > > > to help me getting it to work, lol?
> > > > >
> > > > > What I'm talking about:
> > > > >
> > > > > 1. Use left-nav template in Libguides v2
> > > > >
> > > > > 2. Once you scroll down in the content area get the left-nav to
> stay
> > > with
> > > > > you, always visible.
> > > > >
> > > > > You can see a really slick example of it on the bootstrap docs page
> > > > (which
> > > > > also uses scrollspy to note where in the document you are...but
> lets
> > > slow
> > > > > down haha): http://getbootstrap.com/javascript/
> > > > >
> > > > > 3. Bootstrap has affix.js built-in and its therefore possible to do
> > it
> > > > > without any outside code.
> > > > >
> > > > > 3a. You can see info about affix.js at the bottom of the bootstrap
> > docs
> > > > > link I just provided.
> > > > >
> > > > > 4. I've gotten it to work BUT with a lot of problems.
> > > > >
> > > > > For one, it will stay stuck in the middle of the screen instead of
> > > > sticking
> > > > > to the top of the screen once you've started scrolling.
> > > > >
> > > > > For two, it breaks the responsivity: on small screens instead of
> > normal
> > > > > functioning it kinda hides behind the content column
> > > > >
> > > > > For three, once it starts scrolling its width changes.
> > > > >
> > > > > For four, it will cover the footer when you get down there.
> > > > >
> > > > >
> > > > > To have the left-nav sticky on long content pages would be GREAT.
> > > > >
> > > > > Thanks a lot.
> > > > >
> > > > > --
> > > > > Brad Coffield, MLIS
> > > > > Assistant Information and Web Services Librarian
> > > > > Saint Francis University
> > > > > 814-472-3315
> > > > > [log in to unmask]
> > > > >
> > > >
> > >
> > >
> > >
> > > --
> > > Brad Coffield, MLIS
> > > Assistant Information and Web Services Librarian
> > > Saint Francis University
> > > 814-472-3315
> > > [log in to unmask]
> > >
> >
>
--
Brad Coffield, MLIS
Assistant Information and Web Services Librarian
Saint Francis University
814-472-3315
[log in to unmask]
