position: исправлена ​​остановка навигации в конце определенного div - прокрутка параллакса и javascript

У меня есть вертикально ориентированная вертикальная панель навигации, которую я хотел бы остановить в конце #contact. Ему нужно будет снова возобновить прокрутку, если пользователь прокручивает назад. Каков наилучший способ добиться этого?

используется javascript:

$(function() {
            $.fn.scrollBottom = function() {
                return $(document).height() - this.scrollTop() - this.height();
            };

            var $el = $('#nav>div');
            var $window = $(window);
            var top = $el.parent().position().top;

            $window.bind("scroll resize", function() {
                var gap = $window.height() - $el.height() - 10;
                var visibleFoot = 340 - $window.scrollBottom();
                var scrollTop = $window.scrollTop()

                if (scrollTop < top + 10) {
                    $el.css({
                        top: (top - scrollTop) + "px",
                        bottom: "auto"
                    });
                } else if (visibleFoot > gap) {
                    $el.css({
                        top: "auto",
                        bottom: visibleFoot + "px"
                    });
                } else {
                    $el.css({
                        top: 0,
                        bottom: "auto"
                    });
                }
            }).scroll();
        });

jsfiddle


javascript scroll parallax css-position
person AMC    schedule 27.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я считаю, что это код, который вы ищете:

$(function() {
    var $Nav = $('#Nav');
    var $window = $(window);
    var $contact = $('#contact');
    var maxTop = $contact.offset().top + $contact.height() - $Nav.height();
    window.navFixed = 1;

    $window.bind("scroll resize", function() {
        var currentTop = $window.scrollTop();
        if (currentTop <= maxTop && window.navFixed == 0) {
            $Nav.css({
                position: 'fixed',
                top: '5%'
            });
            window.navFixed = 1;
        } else if (currentTop > maxTop && window.navFixed == 1) {
            $Nav.css({
                position: 'absolute',
                top: maxTop
            });
            window.navFixed = 0;
        }
    }).scroll();
});

Элемент #Nav содержит указанный вами CSS: position: fixed; top: (...). Когда документ готов, переменная maxTop вычисляется на основе вершины и высоты элемента #contact.

В событиях scroll и resize переменная currentTop вычисляется как текущая позиция прокрутки. Если это значение меньше maxTop, то #Nav устанавливается на исходный CSS; если значение выше, применяются новые стили CSS: position: absolute; top: maxTop;

window.navFixed используется для предотвращения постоянного обновления CSS при прокрутке. Я уверен, что этот бит можно улучшить, однако он демонстрирует свое предназначение.

Полный HTML-код см. на странице JSFiddle.

PS. В вашем коде есть небольшая ошибка, где #Nav относится к элементу <ul>, а не к элементу <nav>. Однако движущимся элементом является <ul>, хотя должен быть <nav>.

person Jesse    schedule 02.03.2013