jQuery Waypoint切換粘性包裝器的高度

Question

http://jsfiddle.net/Luter/

向下滾動頁面時，會觸發向上滑動，但粘性包裝紙不會調整為向上滑動的元素缺少的高度。 停留在那里並阻止內容出現。 如何根據向上滑動的元件的高度調整粘性包裝紙的高度？

http://jsfiddle.net/Luter/1/注釋掉第一個// $（'。option-wrap'）。slideToggle（）; （情況b）單擊菜單並向下滾動。 菜單元素這次只有在滾動超過頁眉的高度時才是粘性的。 再次，如何調整缺少的頁眉的粘性包裝紙高度，以便立即卡住菜單？

這兩種情況與膠印或刷新粘性包裝紙有關嗎？ 我認為，由於Waypoint可以正確測量整個Menu / window元素的初始狀態的高度，因此即使部分滑動選項或隱藏Header時，粘性包裝紙也可以保持其高度。

我正在尋找一種根據Options元素或隱藏的Header元素的滑動/可見/切換狀態將較小的粘性包裝紙高度傳遞給Waypoint的方法。

我無法繞過如何將丟失的向上滑動或隱藏的元素高度傳遞給Waypoint的麻煩，這樣內容始終可以很好地在菜單下流動。

我已經檢查了tutsplus ， Waypoints Docs ， Sticky Elements ， 何時 堆疊不同的jquery-waypoint偏移量 ， 如何堆疊的jquery-waypoints-plugin-fire-when，並嘗試了許多不同的組合，但根本就沒有到那里。

你能幫我么？ 謝謝您的寶貴時間，我非常珍視Waypoints插件，在您的幫助下學習正確使用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/

盡管我不確定用Waypoint本身是否可以實現相同的目標，但加起來。

如果您有更好/更精細/更流暢的解決方案，請告訴我。

謝謝。

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

    }    
});

Answer 2

http://jsfiddle.net/Luter/8/

無需更改CSS即可更加流暢！ 邏輯是繼續處理包裝元素的卡住狀態，然后才將.sticky-wrapper設置為Menu高度，以避免菜單下滑動Options元素產生的空間。 它們會滑動，但是.sticky-wrapper當然並不關心是否這樣做，並且像Caleb所說的那樣進行工作。 因此，需要將.sticky-wrapper的高度更改為Menu的高度。 雖然僅當Menu包裝元素具有停留類時才應這樣做。

var menuHeight = $('#menu').outerHeight();
console.log (menuHeight);

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

$('#menu').click(function(){
    $('.option-wrap').slideToggle();    
        if ( $('#menu-wrap').hasClass('stuck')) {
            console.log('stuck');
            console.log ('.sticky.wrapper height stuck before change:', $('.sticky-wrapper').height());
            $('.sticky-wrapper').css('height', menuHeight);
          console.log ('.sticky.wrapper height stuck after change:', $('.sticky-wrapper').height());            
        }
});

如果這也可以通過某種方式實現

$.waypoints('refresh');

當菜單通過航路點時，請告訴我。

對此解決方案的任何反饋都非常歡迎。 謝謝。