Making sticky sidebar responsive?

Question

I have a sticky sidebar but can't make it go to the bottom of the page when a media query is triggered.

It's working really well on desktop, but when resizing the page it will have a fixed position in top of everything.

<script>$.lockfixed("#spot_menu",{offset: {top: 0, bottom: 300}});</script>

I want it to have a relative position but CSS media query wont work in my media query:

#spot_menu { position: relative; }

Any idea of how to do this? Thank you

You're setting your position with JS, so your media query could also be in JS, using something like `document.documentElement.clientWidth`. See http://www.quirksmode.org/mobile/viewports.html — stephenhay, Jun 17 '14 at 22:35
A little hazy on what you are trying to do...but jquery has a `css` method you can use to manipulate css if that helps — ewizard, Jun 17 '14 at 22:35
@ewizard you mean toggling a css class? But how do I know the media query size I want to toggle the class by JS? — Gibson, Jun 17 '14 at 22:39
by `media query size` are you talking about the size of the container the media is in? — ewizard, Jun 17 '14 at 22:41
@ewizard want to say in JS: When the window size is "X" do this, otherwise, don't do it basically. — Gibson, Jun 17 '14 at 22:41
Then as @ewizard says, you should look at http://api.jquery.com/css/ — stephenhay, Jun 17 '14 at 22:42
ah ok - this might help http://stackoverflow.com/questions/7789043/how-can-i-detect-window-size-with-jquery — ewizard, Jun 17 '14 at 22:43
That might do the trick! I've also found data-interchange from Foundation that could do it also. Thanks guys! — Gibson, Jun 17 '14 at 22:46

score 0 · Answer 1 · answered Jun 17 '14 at 22:48

0

Something like (where x is the value you are checking against):

var height = $(window).height();

if(height === x) {
  ...
}

You could also use $(window).width() depending on what you are measuring.

answered Jun 17 '14 at 22:48

ewizard

1 Answers1