Fix Div вверху при прокрутке

Я использовал следующий код, чтобы исправить div в верхней части страницы при прокрутке.Fix 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; 
}

Но когда я прокручиваю страницу, элемент не исправляются в верхней части страницы. Как я могу исправить эту проблему?

Update

Контейнер общий стиль. Есть несколько элементов с одним и тем же стилем, и я использовал класс для идентификации искомого элемента. Я изменил код на это.

FiddleFiddle

источник

2014-01-22 Imesh Chandrasiri

Я не понимаю, - это ваш элемент, который вы хотите придерживаться верхней называется .container, или это .payment-инфо-контейнер? Ваш код, похоже, относится к обоим, но я не уверен, что это правильно. –

Можете ли вы сделать онлайн-демонстрацию, как на [Fiddle] (http://jsfiddle.net) –

Пожалуйста, сделайте скрипку: jsfiddle.net –

вы можете попробовать:

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 в скрипке.

источник

2014-01-22 06:17:37 ucdream

Пробег: .

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

источник

2015-05-05 18:12:42

Fix Div вверху при прокрутке

ответ

Смежные вопросы