当页面向下滚动时,将pageYOffset值添加到div的位置

时间:2015-06-15 20:31:28

标签: javascript jquery html css

有人可以告诉我如何在滚动发生时将pageYOffset属性添加到div的最高值。

我想和滚动一起进行div移动,因为我必须将pageYoffet值添加到div的最高值,div相对定位。

这是fiddle

的链接

这是html代码:

<div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
    <div class="slide-inner-container">
        <div class="slider-content">

        </div><!-- /.slider-content -->
    </div><!-- /.slide-inner-container -->
</div><!-- /.slide -->

我想将值添加到div'.slider-content'。

我知道如何在任何给定点找到它但我不确定如何在页面滚动发生时动态添加它。任何帮助,将不胜感激。

编辑:position: fixed看起来像一个简单的解决方案,但我想要一个js解决方案,因为固定位置会干扰其他一些元素。

1 个答案:

答案 0 :(得分:2)

也许我误解了,你是否想要将div固定在顶部?如果是这种情况,你需要将slider-content设置为固定位置,top应设置为0,如下所示:

position: fixed;
top: 0;

这是小提琴的工作; http://jsfiddle.net/a2tkorno/7/

编辑:

这是您需要使用的Javascript:

$(window).scroll(function() {
    $('.slider-content').css('top', window.scrollY);
});

并将这些样式应用于.slider-content:

.slider-content {
    top: 0;
    position: absolute;
    z-index: 40;
}

如果现在效果更好,请告诉我。

此致