CODEWITHSUNDEEP
javascriptjqueryhtmlcsssticky
Simonas Falkauskas
Simonas Falkauskas

Reputation: 41

How to make element stick on the bottom of the screen with jQuery?

I have a div element which can be visible or not when webpage is loaded and placed between other div elements. Here is code example:

<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>

So i would like to add class ".sticky", when browser window bottom reaches bottom of the ".sticking-block" element and keep it fixed while scrolling to the bottom of the webpage. Or remove ".sticky" class when scrolling up again and reaching previous position of the element. ".sticking-block" can be visible or not on initial view, depending on the height of ".block" elements.

Sure it's some height calculations. Thanks for help.

Upvotes: 0

Views: 1679

Answers (2)

sorabh86
sorabh86

Reputation: 497

You can do this easily by using jQuery. Here is solution. please check.

    <html>
  <head></head>
  <body>


<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
    
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script>
  var $sticky = $('.sticking-block');
  var stickytop = $sticky.offset().top;
  
  $(window).scroll(function(){
    var scroll = $(window).scrollTop() + $(window).height();
    
    if (scroll >= stickytop) $sticky.addClass('sticky');
    else $sticky.removeClass('sticky');
  });
</script>
  </body>
</html>

Upvotes: 1

step
step

Reputation: 2409

You have something wrong. Try this example. Hope this will help you.

Try this:

<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="sticking-block">
  <div class="sticky">this block sticks to the bottom</div>
</div>
<div class="block">some content</div>
<div class="block">some content</div>

.block {
    position:relative;
    width: 100%;
    background: yellow;
 }
 .sticking-block {
   position:absolute;
   bottom:0;
   left:0;
   width: 100%;
   height: 30px; 
   background: red;
 }
 .sticking-block .sticky {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 999;
 }

Upvotes: 1

Related Questions