CODEWITHSUNDEEP
javascriptjquery
user2896120
user2896120

Reputation: 3282

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

}

Upvotes: 0

Views: 99

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

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/

Upvotes: 3

Related Questions