position:fixed navigation stop at end of specific div - parallax scrolling & javascript

Question

I have a vertically oriented vertical navigation bar, that I would like to make stop at the end of #contact . It will need to resume scrolling again if the user scrolls back up. What is the best way to achieve this?

javascript being used:

$(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

I believe this is the code you are looking for:

$(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();
});

The #Nav element contains the CSS you had originally specified: position: fixed; top: (...) position: fixed; top: (...) . When the document is ready, the variable maxTop is calculated based on the #contact element's top and height.

On the scroll and resize event, the variable currentTop is calculated as the current scroll position. If this value is lower than maxTop , then #Nav is set to the original CSS; if the value is higher, new CSS styles are applied: position: absolute; top: maxTop; position: absolute; top: maxTop;

window.navFixed is used to prevent the CSS to be constantly updated while scrolling. I'm sure that bit can be improved, however, it demonstrates its purpose.

Check out the JSFiddle for the full HTML..

PS. There's a minor bug in your code, where #Nav refers to the <ul> element, rather than the <nav> element. However, the moving element is the <ul> , when it should be <nav> .