滚动时,我使用以下代码将div固定到页面顶部。

$('.container').data("top", $('.container').offset().top);

$(window).scroll(function(){
    if ($(window).scrollTop() > $('.container').data("top")) {
        $('.container').css({'position': 'fixed', 'top': '0'});
    }
    else {
        $('.container').css({'position': 'static', 'top': 'auto'});
    }
});


Element和父CSS如下。

父母

.content-right {
    width: 688px;
    margin-top: 11px;
    margin-right: 10px;
    float: right;
}


元件

.container {
    background: #FFF;
    background-color: #FFF;
    width: 687px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
    margin-bottom: 20px;
}


但是,当我滚动页面时,该元素不会固定在页面顶部。
如何解决此问题?

更新资料

容器是常见样式。有几个具有相同样式的元素,我使用了一个类来标识所需的元素。我已经将代码更改为此。

小提琴Fiddle

最佳答案

你可以试试:

var $container = $('.payment-info-container'),
    top = $container.offset().top + $container.outerHeight();

$(window).scroll(function(){
    if ($(window).scrollTop() > top) {
        $container.css({'position': 'fixed', 'top': '0'});
    } else {
        $container.css({'position': 'static', 'top': 'auto'});
    }
});


请参见DEMO。顺便说一句,您没有在小提琴中加载jquery资源。

关于javascript - 滚动时将Div固定在顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21274061/

10-10 18:41
查看更多