Question

滚动时，我使用以下代码将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'});
    }
});

元素和父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

Answer 1

你可以尝试：

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资源。

Answer 2

尝试此。

JSFIDDLE

/* Dynamic top menu positioning
 *
 */

var num = 50; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

//USE SCROLL WHEEL FOR THIS FIDDLE DEMO

滚动时将Div固定到顶部

2 个答案: