Fixed position jQuery waypoint right under first waypoint and not the top

2 Views

I want the navigation bar the be fixed position whenever
it touches the that dark blue rectangle and not when it reaches the
brower top you can view what i am after here: http://cuberapp.com/ any
help appreciated thanks. 

jQuery('.wrap_head').waypoint('sticky', {
  stuckClass: 'stuck1',
  offset:'bottom-in-view'
});                    

//jQuery('.navbar').waypoint('sticky', {
  // stuckClass: 'stuck1',
   //offset: 99
//});

//initialise Stellar.js
    jQuery(window).stellar();
    //Cache some variables
    var i = 1;
    var nav_container = jQuery(".nav-wrapper");
    var nav = jQuery(".navbar");

    var top_spacing = 99;
    var waypoint_offset = 50;

    var num = jQuery('li.menu-item').find('a').each(function () {
         jQuery(this).attr('data-slide', i);
         i++;
        });   

    mywindow = jQuery(window);
    htmlbody = jQuery('html,body');

    //Setup waypoints plugin    
    nav_container.waypoint(function (direction) {   

            if (direction === 'down') {

                nav_container.css({ 'height':nav.outerHeight() });      
                nav.stop().addClass('stuck').css("top",- nav.outerHeight())
.animate({"top":top_spacing});

            }else {

                nav_container.css({ 'height':'auto' });


nav.stop().removeClass("stuck")
.css("top",nav.outerHeight()+waypoint_offset).animate({"top":""});

            }

    }, {
offset: function() {
        return $.waypoints('viewportHeight') / 3 - nav.outerHeight()-

waypoint_offset;            
        }
         });
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I’m still not sure how the elements on your page are positioned. Some more information would be helpful (Is Cuber an example or the page you are working on?). Still, this may be what you need:

    http://jsfiddle.net/Y4Yks/41/

    jQuery

    function positionMenu(){
    if ( $(window).scrollTop() >= $('#image').height() - $('#bluebar').height() ) {
        $('#menu').css({'position': 'fixed', 'top' : $('#bluebar').height() + 'px'});
    } else {
        $('#menu').css({'position': 'static'});
    }
}


    positionMenu(); // position once when ready

    $(window).scroll(function () { 
    positionMenu(); // position every time the user scrolls
    });

    HTML

    <div id="bluebar"></div>
<div id="image"></div>
<div id="menu"></div>

    CSS

    div {
    width: 100%; }

#bluebar {
    background: navy; 
    height: 80px;
    position: fixed;
    top: 0; }

#image {
    background: #ddd; 
    height: 300px; }

#menu {
    background: red; 
    height: 80px; }