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が常に更新されないようにするために使用されます。ビットは改善できると確信していますが、それはその目的を示しています。

完全なHTMLについては、 JSFiddleを確認してください。

PS。コードに小さなバグがあり、要素ではなく要素#Navを参照しています。ただし、移動要素は、あるべきときにです。<ul><nav><ul><nav>

于 2013-03-02T00:09:29.693 に答える