Apple store style fixed div on LEFT

Question

I'm pulling my hair out over this. I have a webpage where I'd like to have a fixed position div on the left (the parrot & translater) follow the page as it scrolls down. http://www.cartoonizemypet.com/new/help/

I managed to follow this tut http://jqueryfordesigners.com/fixed-floating-elements/ and get what I thought was a perfect effect! Then I tried viewing it on my phone.... As soon as I zoomed in the blasted div moved over the text! :( You can see the affect on a regular browser by shrinking the browser window and scrolling to the right.

Does anyone know a way to prevent the parrot from moving horizontally? I've been searching high and low for a solution but it's starting to seem impossible.

Here's the relevant CSS

#content {
    padding-top:20px;
    padding-bottom:713px;   /* Height of the footer element */
    width:888px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#help-col1 {
    left:0;
    width:218px;
    position:absolute;
    height:500px;
}

#parrot-box {
    position:absolute;
    top:0;
    margin-top: 20px;
}

#parrot-box.fixed {
    position:fixed;
    top:0;
}

#help-col2 {
    width:634px;
    float:right;
}

Feel free to check out the page source (http://www.cartoonizemypet.com/new/help/) to see the SCRIPT and HTML. Any help would be MUCH appreciated.

I tried deconstructing the tutorial's demo page to see if I was doing something wrong, but as soon as I centered the content and/or moved the floating div to the right, the fixed div "escapes." — user1597021, Aug 14 '12 at 05:19

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

When the parrot gets the 'fixed' class, The parrot (inside #help-col1) has a 'left' value of 0. This means he's always going to be attached to the left side of the page... no matter what the dimensions of the window are, and how it scrolls.

What you're asking for is for him to behave like a fixed positioned element when the user scrolls vertically, but not horizontally. As far as I know, this isn't possible. Fixed is fixed... x and y.

However, there are some solutions (like this one) that talk about using javascript to get over this problem. The theory here is that a little javascript can listen to when the page has been horizontally scrolled and if it has, nudge the parrot back into place accordingly.

Personally, I'd look into using css media queries to make a mobile specific layout. You can assign specific CSS for the mobile version of the site, so hopefully the user doesn't need to zoom (or horizontally scroll) at all =)

Good luck!

edited May 23 '17 at 12:27

Community

1
1

answered Aug 14 '12 at 07:24

Chazbot

1,890
1
13
23

Good advice, thanks! That's a great point about the mobile site; I had wanted to get one of them setup, but I know there's people out there like me that prefer zooming in on desktop websites on my phone. :) I'll try the javascript solution you linked tomorrow and let y'all know how it goes. Brain hurting too much to try it now. – user1597021 Aug 14 '12 at 07:33
1

Remember that JS solutions listening to scroll events are usually noticeably laggy – Oleg Aug 14 '12 at 08:07
1

Correct, o.v. That's what prompted my media query suggestion =) – Chazbot Aug 14 '12 at 16:39

score 1 · Answer 2 · answered Aug 14 '12 at 08:24

JS scroll event listener has been suggested, but all implementations relying on it are systematically laggy. I reckon you would have better luck using media queries to determine whether or not fixed positioning is appropriate (i.e. OK if the window/device is wide enough, or substitute with an alternative behaviour if not).

You could actually leave the parrot at the top for narrow screens and preserve some real estate as well as address older mobile Safari versions' inability to correctly interpret position:fixed. You could certainly implement out a more refined approach, but this should be a good starting point - to try it out, execute the following script on your page (just in the console is fine):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');

First it overrides the original #parrot-box.fixed declaration, and then applies your floated styling to whenever the window is at least 982px wide (your page wrapper width).

That's really clever thx! :) http://www.cartoonizemypet.com/new/help/index2.shtml It's a great workaround for browsers, but unfortunately the parrot still escapes when I zoom in on my phone. I guess because a zoom in is different from a resize(?) — user1597021, Aug 17 '12 at 22:54
@user1597021: [mobile browsers don't support `position:fixed`](http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html), except, I believe, post-iOS5 Safari. You'll have to target them for exclusion from the rule suggested above - unfortunately there is [no feature-detection alternative for this property](https://github.com/Modernizr/Modernizr/wiki/Undetectables). — Oleg, Aug 18 '12 at 00:50

score -1 · Accepted Answer · answered Aug 18 '12 at 00:55

Not to worry everyone, my husband figured out an alternative way of making this work! :)

Rather than moving the parrot with the page; I'm going to have multiple versions of the parrot inside the answer divs. That way when a user clicks on an answer it pops open and the parrot appears beside it.

Not how I originally had it planned out, but I think I can make this new way look even better!

Thanks for the help at any rate! :)

Apple store style fixed div on LEFT

3 Answers3