0

我有一个网页标题，当用户向下滚动页面时它会向下滑动。

我正在使用 jquery 执行此操作。它正在工作，但问题是保存标题的s 在页面上div的其他 s 后面。div

我试图将其位置设置为绝对或相对，但它对我不起作用。

这是我的代码。

HTML 

 <!--End Toolip-->
    </head>


<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>

</div>

<!---Myother divs----->

CSS

<style>
#headerSlideContainer {
    position: fixed;

    top:-50px;
    width: 100%;
    background: black;
}
#headerSlideContent {
    width: 900px;
    height: 50px;
    margin: 0 auto;
    color: white;
}
</style>

查询

<script type="text/javascript">
$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});
</script>
4

2 回答 2

1

我已经尝试过了，我希望这是你想要的..

单击此链接进行演示

我在需要的地方添加了 z-index。现在这就是 css 和 html 的外观。

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

CSS：

#headerSlideContainer {
        position: absolute;
         top:0px;
        width: 100%;

       height:1000px;
        background: black;
    }
    #headerSlideContent {
        width: 900px;
        height: 50px;
        margin: 0 auto;
        color: white;
        background:Red;
        z-index:10000;
        position:fixed;
    }

    #new{
        top:60px;
        z-index:2;
        height:100px;
        background:Orange;
        position:absolute;
        color: white;

    }
于 2013-07-26T13:20:11.187 回答
0

您可以将要保留在顶部的元素的位置设置为固定。

例如，如果您想将#headerSlideContainer 保持在顶部，那么

#headerSlideContainer{
position: fixed;
}

它会成功的。不需要 jQuery。

于 2013-07-26T14:08:27.113 回答