Question 14923 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

fixed element when it appears on the page – Jquery

Now I have, when I scroll to a certain element, it is then fixed in the place I need, but at the same time it jumps from one place to another

I need to make sure that as soon as this element completely appears at the bottom of the page, it is immediately fixed so that it does not jump from one place to another later

But so far I haven’t been able to find a solution

$(document).ready(function() {
  var element = $(".btn");
  var height_el = element.offset().top;
  var element_stop = $(".end");
  var height_el_stop = element_stop.offset().top;

  $(window).scroll(function() {
    if($(window).scrollTop() > height_el_stop) {
      element.removeClass("fixed");      
    } else {  
      if ($(window).scrollTop() > height_el) {
        element.addClass("fixed");
      } else {
        element.removeClass("fixed");
      }
    }
  });
});
.info {
  margin: 100px auto;
  text-align: center;
}

.btn {
  width: 200px;
  padding: 12px 50px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
}

.fixed {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="btn">button</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info end">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
Tags:

3

Answers


  1. 0

    I have reproduced your code and tried but i am not really good at CSS. I have changed bit of your JS code as follows:

    $(document).ready(function () {
    var element = $(".btn");
    var height_el = element.offset().top;
    var element_stop = $(".end");
    var height_el_stop = element_stop.offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > height_el_stop) {
            element.removeClass("fixed");
        } else {
            if ($(window).scrollTop() > height_el) {
                element.css('position','fixed').css('top','0');
            } else {
                element.css('position','static');
            }
        }
    });
});
    .info {
            margin: 100px auto;
            text-align: center;
        }

        .btn {
            width: 200px;
            padding: 12px 50px;
            background-color: blue;
            margin: 0 auto;
            text-align: center;
        }

        .fixed {
            position: fixed;
            z-index: 99;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    <html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-w   idth, initial-scale=1.0">
    <title>fix element</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>   

<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="btn">button</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info end">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>



</body>

</html>
    Login or Signup to reply.
  2. 0

    You need to take into account the viewport height, e.g. window height:

    $(document).ready(function() {
  var height_window = $(window).height();
  var element = $(".btn");
  var height_el = element.offset().top;
  var element_stop = $(".end");
  var height_el_stop = element_stop.offset().top;
  console.log(height_window, height_el, height_el_stop)

  $(window).scroll(function() {
    let scrollTop = $(window).scrollTop();
    if(scrollTop > height_el_stop) {
      element.removeClass("fixed");      
    } else if (scrollTop + height_window > height_el) {
        element.addClass("fixed");
    } else {
      element.removeClass("fixed");
    }
  });
});
    .info {
  margin: 100px auto;
  text-align: center;
}

.btn {
  width: 200px;
  padding: 12px 50px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
}

.fixed {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="btn">button</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info end">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
    Login or Signup to reply.
  3. 0

    The behavior you want is simple with position: sticky; You only need to use js to unstick it when you want.

    $(document).ready(function() {
  var element = $(".btn");
  var element_stop = $(".end");
  var height_el_stop = element_stop.offset().top;

  $(window).scroll(function() {
    if ($(window).scrollTop() > height_el_stop) {
      element.addClass("unstick");
    } else {
      element.removeClass("unstick");
    }
  });
});
    .info {
  margin: 100px auto;
  text-align: center;
}

.btn {
  width: 200px;
  padding: 12px 50px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
  position: sticky;
  z-index: 99;
  top: 100vh;
  left: 50%;
  transform: translate(-50%, -100%);
}

.btn.unstick {
  position: static;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="btn">button</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info end">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
<div class="info">info</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search