Исправлено положение путевой точки jQuery прямо под первой путевой точкой, а не сверху

Я хочу, чтобы панель навигации была в фиксированном положении всякий раз, когда она касается этого темно-синего прямоугольника, а не когда она достигает верхней части браузера, вы можете посмотреть, что мне нужно здесь: http://cuberapp.com/ спасибо за любую помощь.

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

wordpress jquery jquery-waypoints
person youngdeveloper    schedule 20.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я до сих пор не уверен, как расположены элементы на вашей странице. Некоторая дополнительная информация была бы полезна (является ли Cuber примером или страницей, над которой вы работаете?). Тем не менее, это может быть то, что вам нужно:

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; }
person eevaa    schedule 20.08.2013
comment
Спасибо за ответ, но ваше предложение не сработало. Моя проблема в том, что я не хочу, чтобы навигация прыгала сверху, я просто хочу, чтобы она останавливалась, как только она коснется синей полосы, черт возьми, спасибо - person youngdeveloper; 20.08.2013
comment
Спасибо, eevaa, сработало отлично, у меня есть еще одна проблема, есть ли у вас опыт работы с wordpress и bootstrap, кажется, на сайте, над которым я работаю, bootstrap.js конфликтует с плагином контактной формы 7, кнопка отправки не работает. Любые идеи и еще раз спасибо - person youngdeveloper; 21.08.2013