javascript - jQuery Waypoints 切换粘性包装高度

Question

http://jsfiddle.net/Luter/

向下滚动页面时，会触发向上滑动，但粘性包装器不会调整到向上滑动元素缺失的高度。是留在那里并防止内容出现。如何根据向上滑动元素的高度调整粘性包装器的高度？

http://jsfiddle.net/Luter/1/ 注释掉第一个//$('.option-wrap').slideToggle(); (情况 b)单击“菜单”并向下滚动。这次的 Menu 元素只有在滚动超过 Header 的高度时才具有粘性。同样，我如何调整丢失的 Header 的粘性包装高度，以便立即卡住菜单？

这两种情况是否与偏移或刷新粘性包装有关？我认为，由于 Waypoints 正确地测量了整个菜单/窗口元素的初始状态的高度，因此即使部分向上滑动选项或隐藏标题时，粘性包装器也会保持其高度。

我正在寻找一种方法，根据 Options 元素或隐藏的 Header 元素的滑动/可见/切换状态，将较小的粘性包装器高度传递给 Waypoint。

我无法思考如何将缺失的向上滑动或隐藏元素的高度传递给 Waypoints，以便内容始终在菜单下很好地流动。

我检查了tutsplus , Waypoints Docs , Sticky Elements , stack different-offset-for-jquery-waypoint , stack how-to-make-jquery-waypoints-plugin-fire-when并尝试了许多不同的组合，但就是没有达到目的。

你能帮帮我吗？感谢您抽出宝贵时间，我非常重视 Waypoints 插件，在您的帮助下学会正确使用它会很棒。谢谢。

HTML

<div id='header'>HEADER</div>
<div id='menu-wrap'>
    <div id='menu'>MENU</div>
    <div class='option-wrap'>
        <div id='opt1'>OPTION 1</div>
        <div id='opt2'>OPTION 2</div>
        <div id='opt3'>OPTION 3</div>
        <div id='opt4'>OPTION 4</div>
    </div>
</div>
<div id='content'>CONTENT</div>

jQuery

$('#menu-wrap').waypoint('sticky');

$(function() {                     
  $('#menu').waypoint(             
    function() {
      console.log("Waypoint reached.");
        //case b
      //$('.option-wrap').slideToggle();
    }
  )
});

$("#menu").click(function(){

    $('.option-wrap').slideToggle();

    $('#header').slideToggle('slow');

});

CSS

#header, #menu, #opt1, #opt2, #opt3, #opt4, #opt5, #content {
    width: 100%;
    line-height: 2em;
    font-size: 200%;
    text-align: center;
}

#header {
    background: #e74c3c;
}

#menu {
    background: #2ecc71;
}

#opt1 {
    background: #f39c12;
}

#opt2 {
    background: #9b59b6;
}

#opt3 {
    background: #95a5a6;
}

#opt4 {
    background: #34495e;
}

#content {
    background: #2980b9;
    height: 1000px;
}

#menu-wrap.stuck {
    position: fixed;
    top: 0;
    width: 100%;
}

Answer 1

http://jsfiddle.net/Luter/5/

虽然我不确定 Waypoints 本身是否可以实现同样的效果。

如果您有更好/更好/更流畅的解决方案，请告诉我。

谢谢。

var menuWrapHeight = $('#menu-wrap').outerHeight();
console.log (menuWrapHeight);
var menuHeight = $('#menu').outerHeight();
console.log (menuHeight);
var optionWrapHeight = $('.option-wrap').outerHeight();
console.log (optionWrapHeight);

$('#menu-wrap').waypoint('sticky');

$(function() {                     
  $('#menu').waypoint(             
    function() {
      console.log("Waypoint reached.");
      //$('.option-wrap').slideToggle();
        var optionWrapHeight = $('.option-wrap').outerHeight();
        console.log (optionWrapHeight);
        var newStickyWrapperHeight = menuWrapHeight - optionWrapHeight;
        console.log ('newStickyWrapperHeight', newStickyWrapperHeight);
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);
    }
  )
});

$('#menu').click(function(){

    $('.option-wrap').slideToggle().toggleClass('opened');

    var isVisible = $( '.option-wrap' ).is( ".opened" );
    // var menuWrapHeight = $('#menu-wrap').outerHeight();

    if (isVisible === true ){
        var newStickyWrapperHeight = menuWrapHeight + optionWrapHeight;
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);
    }

    else {

        var newStickyWrapperHeight = menuHeight;
        $('.sticky-wrapper').css('height', newStickyWrapperHeight);

    }    
});