0

我有一个垂直方向的垂直导航栏，我想在#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

4

1 回答 1

2

我相信这是您正在寻找的代码：

$(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元素的顶部和高度计算变量。

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

window.navFixed用于防止 CSS 在滚动时不断更新。我确信该位可以改进，但是，它证明了它的目的。

查看JSFiddle以获取完整的 HTML。

PS。您的代码中有一个小错误，其中#Nav指的是<ul>元素，而不是<nav>元素。但是，移动元素是<ul>，当它应该是 时<nav>。

于 2013-03-02T00:09:29.693 回答