Усовершенствованный jQuery "Sticky Bottom", а также проблема с прокруткой боковой панели - PullRequest
Новая
       50

Усовершенствованный jQuery "Sticky Bottom", а также проблема с прокруткой боковой панели

12 голосов
/ 28 ноября 2011

Искал повсюду решение этой проблемы и пытался использовать несколько плагинов, таких как jQuery Way-points, но безуспешно, я надеюсь, что кто-то здесь сможет предложить решение этой проблемы.

Поскольку это немного сложно объяснить только текстом, я создал диаграмму поведения.

Посмотрите эту ссылку, так как спам-фильтр не позволит мне публиковать сообщения и изображения:

http://imgur.com/VtrQg

Все элементы имеют переменную высоту в зависимости от содержимого.

  1. Наличие боковой панели, которая значительно короче, чем содержимое страницы,

  2. Как только нижняя часть div боковой панели войдет в область просмотра,

  3. Она останется фиксированной в этом положении, в то время как остальная часть контента будет продолжатьпрокрутите как обычно.

  4. Пока боковая панель не достигнет нижнего колонтитула, где она будет прокручиваться вверх с нижним колонтитулом, как обычно.

Это также будет работать вОбратный как пользователь прокручивает в противоположном направлении к верхней части страницы.

1 Ответ

8 голосов
/ 28 ноября 2011

Здесь - мое решение.Вы можете использовать этот пример и реализовать собственное решение вашей проблемы.

HTML: 

<div id="header">
    header
</div>
<div id="left">
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.
</div>
<div id="right">
Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. amet, gravida eget, porta at, wisi. Nam non 000000000 lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum.
</div>
<div id="footer">
    footer
</div>

CSS: 

body { position: relative; }
#header { width: 100%; height: 100px; background: #f00; margin-bottom: 10px; }
#left { width: 75%; background: #f00; float: left; margin-bottom: 10px; }
#right { width: 20%; background: #00f; float: right; position: relative; right: 0; }
#footer { clear: both; width: 100%; height: 100px; background: #f00; }

и, наконец, Javascript: 

function scrollCheck() {
    var $right = $('#right'),
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        docHeight = $(document).height(),
        rightHeight = $right.height(),
        distanceToTop = rightHeight + 110 - windowHeight,
        distanceToBottom = scrollTop + windowHeight + 110 - docHeight;
    if (scrollTop > distanceToTop) {

        $right.css({
            'position': 'fixed',
            'bottom': (scrollTop + windowHeight + 110 > docHeight ? distanceToBottom  + 'px' : '0px')
        });
    }
    else {
        $right.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }
}

$(window).bind('scroll', scrollCheck);
...