CODEWITHSUNDEEP
htmlcsswebkit
Adam Grant
Adam Grant

Reputation: 13105

CSS Fixing has unusual effect on browser window

I have a sidebar that affixes in a way that is similar to http://thenextweb.com/

Here is a live demo of the bug: http://adamkochanowicz.com/static/build0502/kickstrap/_examples/contacts.html

To recreate the issue, just scroll down the page.

And somehow I managed to grab a screenshot of the issue: https://s3.amazonaws.com/prod_object_assets/assets/4995413178034/grab_2013-04-12_a_3.00.59_PM.PNG?AWSAccessKeyId=AKIAJATICW4U3O4HFIEA&Expires=1367506772&Signature=DKQfG5DZSMHCzDO2BenbxpD2Zf0%3D

The grey area at the bottom is the "no-man's-land" you'd see when you scroll too far down on a page.

I'm using jQuery Waypoints to detect when to apply the stuck class to the sidebar.

Once the .stuck is applied, it gives #sidebar the following CSS:

section#sidebar.stuck {
  width: 300px;
  position: fixed;
  top: 0;
  bottom: 0;
  border-color: #DDD;
  width: 25%;
  -webkit-box-shadow: 2px 2px 5px #eeeeee;
  box-shadow: 2px 2px 5px #eeeeee;
}

The jQuery is pretty simple:

<script>$('section#sidebar').waypoint('sticky');</script>

For some reason, this bug does not occur when the horizontal viewport is reduced. For example, when I open up the bottom-docked element inspector in Chrome.

Upvotes: 0

Views: 72

Answers (1)

Cory Shaw
Cory Shaw

Reputation: 1130

In contacts.html on line 866, your CSS line for the class '.row' looks as follows:

.row {
  margin-left: -15px;
  margin-right: -15px;
}

Your bug is fixed once that is removed or set to:

.row {
  margin-left: 0px;
  margin-right: 0px;
}

Upvotes: 1

Related Questions