Home / Questions / 43747
Accepted
PlayerWet
Asked: 2020-01-13 09:16:53 +0800 CST 2020-01-13 09:16:53 +0800 CST

Blinking when changing an element to fixed position with js

  • 772

It turns out that I have a menu that I want, as the scroll arrives, to remain fixed on the screen.

He does it well, but when he arrives he starts blinking, takes off and goes crazy.

$(window).scroll(function(){

    var sticky2   = $(".conte-botk")[0].getBoundingClientRect().top + $(window)['scrollTop']();  


    var sticky = $(".conte-botk");

    var scrolle = $(window).scrollTop();



  if (scrolle > sticky2) {

        sticky.addClass('fixed');

  }else{

        sticky.removeClass('fixed');

    } 


});

I have tried removing the sticky2 variable from the scroll function and the problem is solved, but it stops being accurate when resizing the browser window. Could someone give me a solution?

jquery

1 Answers

  1. Best Answer

    I just found the solution, I don't know if it's very elegant, but it works. I have taken the sticky2 variable out of the scroll function, but when said variable is less than the scrolle variable, what I do is pass the value of the sticky2 variable to integer, thus always keeping the same value. In the opposite case, the variable returns to contain the value that it had at the beginning.

        var sticky2   = $(".conte-botk")[0].getBoundingClientRect().top + $(window)['scrollTop']();  

  $(window).scroll(function(){

        var sticky = $(".conte-botk");

        var scrolle = $(window).scrollTop();



      if (scrolle > sticky2) {

            sticky.addClass('fixed');

         sticky2=parseIn(sticky2);


      }else{

            sticky.removeClass('fixed');
           sticky2   = $(".conte-botk")[0].getBoundingClientRect().top + $(window)['scrollTop']();  


        } 


    });

    It has stopped blinking and even changing the width of the browser window it is still exactly the place where the div changes to fixed position.

    • 1