javascript - 脚本仅在页面刷新时正常工作

Question

我有一个函数，可以使侧面板 (.link-panel) 在到达 (.footer) 时停止，位于 (.link-panel) 内) 是 (.cover)。 (.cover) 是包含 (.link-panel) 的所有元素的 div，因此它是固定的，从技术上讲，它是在到达(.footer)。如果 .control_panel 位于 position: inline-block，我的函数首先进行初始化。如果不是(意味着它是 display: block 并且页面宽度 <= 750px)，则 else 语句将初始化并使 .cover 的位置相对。

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

我的代码

$(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');

}

Answer 1

将代码包装在调整大小事件中，在滚动事件中测试面板是否为内联 block ，如果不是，则禁用 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/