Возможна ли обратная липкая прокрутка с использованием jquery? - PullRequest
Новая
       9

Возможна ли обратная липкая прокрутка с использованием jquery?

1 голос
/ 03 августа 2011

Я пытаюсь создать эффект на веб-сайте, где элемент прикреплен к нижней части браузера с помощью следующего CSS: 

div.featured-image {
width: 100%;
position: fixed;
z-index: 10;
}

и я хочу использовать что-то вроде этого http://vertstudios.com/blog/demo/stickyscroller/demo.php, чтобы остановить прокрутку элемента UP до определенной точки. У меня есть логотип в верхней части сайта, и я не хочу, чтобы фиксированный элемент перекрывал его, если браузер недостаточно высок. Поэтому я пытаюсь заставить его не иметь возможности прокручивать буфер размером около 800 пикселей в верхней части, но все еще остается фиксированным внизу страницы.

1 Ответ

0 голосов
/ 25 октября 2012

Вы можете сделать это с JQuery и динамически устанавливать / сбрасывать верхнее и нижнее свойства css элемента на основе scrollTop().

Образец JQuery: 

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 550) { 
        $('#footer').css('bottom',''); 
        $('#footer').css('top','550px'); 
    } else {
        $('#footer').css('top',''); 
        $('#footer').css('bottom','0px');
    }
});

CSS (для div # footer): 

#footer{
    position: fixed;
    left: 0px;
    display: block;
    background-color: green;
    z-index: 10;
    height: 100px;
    width: 100%;
}

и рабочая скрипка .

...