脚本只能在页面刷新时正常工作

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

包装你的代码在resize事件，考验你的滚动事件如果面板是inline-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/