I am using jQuery to fix an ad unit once a user scrolls down to the targeted div. However I have a setup where I need the fixed element to be moved over 20px to the left. I have a div that wraps it with a padding-right: 20px; but this seems to be overrided as soon as the jquery adds the fixed position class. I only have it where fixed position is top 10px. I don't want it fixed left or right because I want it locked in place.
The weird thing is that the wrap div with the padding is working fine for me in firefox even with the fixed positioning. In Chrome however, the padding is ignored and the unit is shifted over 20px. How can I fix this element to the top of the page and "lock it" in place on the x-axis? Is it possible to use two different positioning styles? (Fixed and absolute?)
Edit:
Here is the jQuery I am using:
;(function($){
$(window).scroll(function() {
var styledDiv = $('#styledDiv'),
targetScroll = $('#float').position().top,
currentScroll = $('html').scrollTop() || $('body').scrollTop();
styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
});
})(jQuery);
and I've tried wrapping the styledDiv with a div I named "adside" with this css:
#adside {padding-right:20px;}
Here is the html:
<div id="float"></div>
<script src="http://takemydough.com/wp-content/themes/iloveit/js/smartbanner.js" type="text/javascript"></script>
<div id="adside">
<div id="styledDiv">
AD CODE
</div>
</div>
</div>
