Question

我有一个垂直方向的垂直导航栏，我希望在#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: (...)。文档准备就绪后，变量maxTop将根据#contact元素的顶部和高度计算。

在scroll和resize事件中，变量currentTop被计算为当前滚动位置。如果此值低于maxTop，则#Nav将设置为原始CSS;如果值更高，则应用新的CSS样式：position: absolute; top: maxTop;

window.navFixed用于防止在滚动时不断更新CSS。我确信这一点可以改进，然而，它证明了它的目的。

查看完整HTML的JSFiddle ..

PS。 您的代码中存在一个小错误，其中#Nav引用<ul>元素，而不是<nav>元素。但是，移动元素是<ul>，应该是<nav>。

位置：固定导航停止在特定div的末尾 - 视差滚动＆amp; JavaScript的

1 个答案: