使用jQuery为div添加固定位置

时间:2014-03-21 15:15:27

标签: javascript jquery html css

我正在尝试实现div滚动的效果,直到它到达顶部并停留在那里。

我通过以下方式实现了这一目标:

HTML

<div id="nav">this is nav</div>
    <div id="mooey">
    <div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>

CSS

#mooey {
    background: green;
    min-height:250px;
    margin-top:300px;

}

#nav {
    background:#000000;
    position:fixed;
    top:0;
    width:100%;
    height:100px;
}

的JavaScript

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});

我想做什么,而不是声明在HTML中的样式中修复了div theFixed。我想知道是否有一种方法可以使用代码来应用它。

原因是如果脚本因任何原因而无法启用或失败 - 我希望theFixed div与mooey div一起滚动而不是卡在中间页面。

你可以看到我在这里做了什么:

http://jsfiddle.net/susannalarsen/4J5aj/7/

对此有何想法?

2 个答案:

答案 0 :(得分:0)

使用$('#theFixed').css('position','fixed');将其固定。

答案 1 :(得分:0)

<script>
$(document).ready(function(){
  $("#FixedElement").css("position","fixed");
});
</script>