user2896120 user2896120 - 1 month ago 9
Javascript Question

Script only works properly on page refresh

I have a function that makes a side panel

(.link-panel)
stop when it reaches
(.footer)
, inside
(.link-panel)
is
(.cover)
.
(.cover)
is the div that contains all the elements of the
(.link-panel
) so it is fixed and technically it is the one that stops when it reaches the
(.footer)
. My function first initializes if
.control_panel
is at
position: inline-block
. If it isn't (meaning it's
display: block
and the page width is <= 750px), then an else statement initializes and makes
.cover
's position relative.

This function is working properly only on page refresh. For example, let's say my page's size is at: 1300px. The display works correctly, but when I shrink the window size to below <= 750px, the side-menu stays fixed even if I change the css property using jQuery. The problem can only be solved if I refresh the page. Then if I start at <= 750px and resize back up, the side menu does not display correctly and I have to refresh the page again for it to display correctly.

My code

$(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

Wrap your code in a resize event, test in your scroll event if the panel is inline-block and disable the css functions if its not:

  $(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/