Question

我有一个功能，当侧面板(.link-panel)到达(.footer)时，(.link-panel)内(.cover)为(.cover)时会停止。 (.link-panel是包含(.footer)的所有元素的div，因此它是固定的，从技术上讲，它是在到达.control_panel时停止的那个。如果position: inline-block位于display: block，我的函数会首先初始化。如果它不是（意味着它是.cover并且页面宽度是＆lt; = 750px），则else语句初始化并使$(document).ready(function(){ var panel = $(".control_panel").css("display"); if(panel == "inline-block"){ fixedScrollBar(); }else{ $(".link-panel").css("position", "relative"); } }); function fixedScrollBar(){ var windw = this; $.fn.followTo = function ( elem ) { var $this = this, $window = $(windw), $bumper = $(elem), bumperPos = $bumper.offset().top + -40, thisHeight = $this.outerHeight(), setPosition = function(){ if ($window.scrollTop() > (bumperPos - thisHeight)) { $this.css({ position: 'absolute', top: (bumperPos - thisHeight) }); } else { $this.css({ position: 'fixed', top: 60 }); } }; $window.resize(function() { thisHeight = $this.outerHeight(); setPosition(); }); $window.scroll(setPosition); setPosition(); }; $('.cover').followTo('.footer'); }的位置相对。

此功能仅在页面刷新时正常工作。例如，让我们说我的页面大小为：1300px。显示正常，但是当我将窗口大小缩小到<= 750px以下时，即使我使用jQuery更改css属性，侧边菜单也会保持固定。只有刷新页面才能解决问题。然后，如果我从＆lt; = 750px开始并重新调整大小，则侧面菜单无法正确显示，我必须再次刷新页面才能正确显示。

我的代码

Answer 1

将代码包装在resize事件中，如果面板是内联块，则在滚动事件中测试，如果不是，则禁用css函数：

  $(document).ready(function() {
  $(window).resize(function() {
    var panel = $(".control_panel").css("display");
    if (panel == "inline-block") {
      fixedScrollBar();

    } else {
      $(".cover").css({"position":"relative","top":0});
    }
  }).trigger('resize');
});


function fixedScrollBar() {
  var windw = this;
  $.fn.followTo = function(elem) {
    var $this = this,
      $window = $(windw),
      $bumper = $(elem),
      bumperPos = $bumper.offset().top + -40,
      thisHeight = $this.outerHeight(),
      setPosition = function() {
         if($(".control_panel").css("display") == "inline-block") {
        if ($window.scrollTop() > (bumperPos - thisHeight)) {
          $this.css({
            position: 'absolute',
            top: (bumperPos - thisHeight)
          });
        } else {
          $this.css({
            position: 'fixed',
            top: 60
          });
        }
      };
  }
    $window.scroll(setPosition);
    setPosition();
  };

  $('.cover').followTo('.footer');

}

https://jsfiddle.net/e9dcmL2q/4/

脚本仅在页面刷新

1 个答案: