Question

我希望导航栏随时都是固定位置它触及那个深蓝色的矩形，而不是它到达时浏览器顶部你可以查看我在这里的内容：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;            
        }
         });

Answer 1

我仍然不确定网页上的元素是如何定位的。更多信息会有所帮助（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; }

修正了第一个航点下的jQuery航点，而不是顶部

1 个答案: