Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Merged
merged 1 commit into from

4 participants

@BMCouto

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
@mhayes

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

@mhayes mhayes merged commit bf73792 into zurb:master
@toxin20

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

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');
});
@alebon

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
Commits on Oct 29, 2012
  1. @BMCouto

    When magellan is fixed the threshold is by default the data-magellan-…

    BMCouto authored
    …expedition element height
    
    also cached the element into $fixedMagellan
This page is out of date. Refresh to see the latest.
View
13 vendor/assets/javascripts/foundation/jquery.foundation.magellan.js
@@ -12,8 +12,9 @@
'use strict';
$.fn.foundationMagellan = function(options) {
- var defaults = {
- threshold: 25,
+ var $fixedMagellan = $('[data-magellan-expedition=fixed]'),
+ defaults = {
+ threshold: ($fixedMagellan.length) ? $fixedMagellan.outerHeight(true) : 25,
activeClass: 'active'
},
@@ -37,21 +38,21 @@
.addClass($expedition.attr('data-magellan-active-class') || options.activeClass);
// Update fixed position
- $('[data-magellan-expedition=fixed]').on('magellan.update-position', function(){
+ $fixedMagellan.on('magellan.update-position', function(){
var $el = $(this);
$el.data("magellan-fixed-position","");
$el.data("magellan-top-offset", "");
});
- $('[data-magellan-expedition=fixed]').trigger('magellan.update-position');
+ $fixedMagellan.trigger('magellan.update-position');
$(window).on('resize.magellan', function() {
- $('[data-magellan-expedition=fixed]').trigger('magellan.update-position');
+ $fixedMagellan.trigger('magellan.update-position');
});
$(window).on('scroll.magellan', function() {
var windowScrollTop = $(window).scrollTop();
- $('[data-magellan-expedition=fixed]').each(function() {
+ $fixedMagellan.each(function() {
var $expedition = $(this);
if ($expedition.data("magellan-top-offset") === "") {
$expedition.data("magellan-top-offset", $expedition.offset().top);
Something went wrong with that request. Please try again.