jQuery Waypoints切换粘性包装器的高度

jQuery Waypoints toggle sticky-wrapper height

本文关键字：包装 高度 Waypoints jQuery      更新时间：2023-09-26

http://jsfiddle.net/Luter/

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

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

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

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

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

我已经检查了tutspus、Waypoints Docs、Sticky Elements、为jquery航路点堆叠不同的偏移量、堆叠如何使jquery 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%;
}

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

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

在不更改CSS的情况下更加流畅！逻辑是在包装好的元素处于卡住状态之后，然后将.stick包装器设置为Menu高度，以避免Menu下滑动Options元素的空间。它们会滑动，但粘性包装纸当然不在乎它们是否滑动，并按照Caleb的指示进行操作。因此，需要将粘性包装纸的高度更改为菜单的高度。尽管只有当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');

当菜单经过航路点时，请告诉我。

任何对这种解决问题的方式的反馈都是非常受欢迎的。非常感谢。

相关文章：