位置：固定導航停止在特定div的末尾 - 視差滾動和javascript

Question

我有一個垂直方向的垂直導航欄，我想在#contact結束時#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

Answer 1

我相信這是您正在尋找的代碼：

$(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: (...) position: fixed; top: (...) 。 文檔准備就緒后，變量maxTop將根據#contact元素的top和height計算。

在scroll和resize事件中，變量currentTop被計算為當前滾動位置。 如果此值低於maxTop ，則#Nav設置為原始CSS; 如果值更高，則應用新的CSS樣式： position: absolute; top: maxTop; position: absolute; top: maxTop;

window.navFixed用於防止在滾動時不斷更新CSS。 我確信這一點可以改進，但它證明了它的目的。

查看JSFiddle以獲取完整的HTML ..

PS。 您的代碼中存在一個小錯誤，其中#Nav引用<ul>元素，而不是<nav>元素。 但是，移動元素是<ul> ，它應該是<nav> 。