When magellan is fixed the default threshold the data-magellan-expedition element height #1087

Merged
merged 1 commit into from Oct 29, 2012

Conversation

Projects
None yet
4 participants
Contributor

BMCouto commented Oct 29, 2012

also cached the element into $fixedMagellan

@BMCouto BMCouto When magellan is fixed the threshold is by default the data-magellan-…
…expedition element height

also cached the element into $fixedMagellan
d0a8aab
Contributor

mhayes commented Oct 29, 2012

Great idea for handling this, thanks for the PR @BMCouto!

@mhayes mhayes added a commit that referenced this pull request Oct 29, 2012

@mhayes mhayes Merge pull request #1087 from BMCouto/patch-1
When magellan is fixed the default threshold the data-magellan-expedition element height
bf73792

@mhayes mhayes merged commit bf73792 into zurb:master Oct 29, 2012

toxin20 commented Nov 20, 2012

magellan doesn't work right for me. the sticky nav is pulled to the top too early ... it's kind of a "hop" to the top. see this screenshot:

Screenshot

i set the magellan treshold value to 0 in the magellan.js which fixed it. does anyone know what the reason for this issue is?

my html markup:

<div class="row">
            <div class="three columns">
                <ul id="sidebar" class="side-nav" data-magellan-expedition='fixed'>
                    <h5>Menü</h5>
                    <li data-magellan-arrival='link1'><a href="#link1"><strong>verta</strong>system</a></li>
                    <li class="divider"></li>
                    <li data-magellan-arrival='link2'><a href="#link2"><strong>verta</strong>plan</a></li>
                    <li data-magellan-arrival='link3'><a href="#link3">TLIF</a></li>
                    <li data-magellan-arrival='link4'><a href="#link4">PLIF</a></li>
                </ul>
            </div>
            <div class="nine columns" style="margin-bottom:800px;">
                <h3 id="link1" data-magellan-destination='link1'>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3 id="link2" data-magellan-destination='link2'>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3 id="link3" data-magellan-destination='link3'>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
                <h3 id="link4" data-magellan-destination='link4'>ejfoij foiwejfj</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quaerat assumenda similique. Dicta quidem consectetur animi totam laudantium quis cupiditate soluta officia nihil dignissimos! Ipsum commodi veniam magnam dolorem pariatur!</p>
            </div>
        </div>
@ghost

ghost commented Jan 22, 2013

In case anyone comes across this ticket searching for the same problem toxin20 had, here's a far from elegant work around but it works.

var $window = $(window);
$(function() {
    $stickies = $('.sticky');
    $stickies.each(function(i, obj) {
        $obj = $(obj);
        if (!$obj.attr('original-top')) {
            $obj.attr('original-top', $obj.offset().top);
        }
    });
    $window.scroll(function() {
        $stickies.each(function(i, obj) {
            $obj = $(obj);
            if ($obj.attr('original-top') <= $window.scrollTop()) {
                $obj.css('position', 'fixed').css('top', '0');
            } else {
                $obj.css('position', '').css('top', '');
            }
        });
    }).trigger('scroll');
});
Contributor

alebon commented Mar 25, 2013

Yes, setting the threshold to the height of my sticky nav fixed the jumping.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment