带填充的固定定位

Posted

技术标签:

【中文标题】带填充的固定定位【英文标题】:Fixed Positioning With Padding 【发布时间】:2012-04-02 00:29:56 【问题描述】:

一旦用户向下滚动到目标 div,我正在使用 jQuery 来修复广告单元。但是我有一个设置,我需要将固定元素向左移动超过 20px。我有一个 div 用 padding-right: 20px; 包裹它但这似乎在 jquery 添加固定位置类后立即被覆盖。我只有在固定位置是前 10px 的地方才有它。我不希望它向左或向右固定,因为我希望它锁定到位。

奇怪的是,即使定位固定,带有填充的 wrap div 在 Firefox 中也能正常工作。然而,在 Chrome 中,填充被忽略并且单位移动了 20 像素。如何将此元素固定到页面顶部并将其“锁定”在 x 轴上?是否可以使用两种不同的定位方式? (固定和绝对?)

编辑:

这是我正在使用的 jQuery:

;(function($)
$(window).scroll(function() 
var styledDiv = $('#styledDiv'),
    targetScroll = $('#float').position().top,
    currentScroll = $('html').scrollTop() || $('body').scrollTop();

styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
);

)(jQuery);

我已经尝试用我用这个 css 命名为“adside”的 div 包装 styledDiv:

#adside padding-right:20px;

这里是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>

【问题讨论】:

我已经添加了我正在使用的代码。 【参考方案1】:

您的 HTML 中有一个额外的标签。尝试删除它,看看它是否有任何作用。与此同时,我将在 jsfiddle 中使用它。

【讨论】:

以上是关于带填充的固定定位的主要内容,如果未能解决你的问题,请参考以下文章

51单片机中将变量数组函数设置在固定位置,定位到绝对地址

51单片机中将变量数组函数设置在固定位置,定位到绝对地址

创建一个固定的 UITextField - Obj C

绝对定位模拟固定定位效果...

UITableViewCell 中的固定大小的 imageView 或固定的文本定位?

讲讲相对定位、绝对定位、固定定位的理解?