Click here to Skip to main content
15,042,397 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
First of all I'm sorry if this question will be a stupid one, I'm a newbie on JavaScript... I want a div stick to the bottom when a specific div is completely visible in the viewport while scrolling... I did it but I guess with every pixel of scroll the code works again and again and there's a flicker while scrolling.

Could you help me please?

https://codepen.io/erenerena/pen/oNBzxqE[^]

What I have tried:

HTML
<div class="container-left">
  <div class="left">
    <p class="heads">LEFT</p>
  </div>
</div>
<div class="container-right">
  <div class="whole">
  <div class="first">
    <p class="heads">FIRST</p>
  </div>
  <div class="second">
    <p class="heads">SECOND</p>
  </div>
    </div>
  <div class="dur"></div>
</div>

<script
			  src="https://code.jquery.com/jquery-3.5.1.min.js"
			  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
			  crossorigin="anonymous"></script>


CSS
body {
  padding:0;
  margin:0;
}

p{
  padding:0;
  margin:0;
}

.heads {
  font-size: 2vw;
  font-weight:bolder;
  padding-top:50px;
  text-align:center;
}
.first {
  height:1800px;
  width:600px;
  background-color:red;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.second {
  height:200px;
  width:600px;
  background-color:blue;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.container-left {
  float:left;
}

.container-right {
  float:left;
}

.left {
  height:3000px;
  width:600px;
  background-color:orange;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.sticky {
  margin-top: 0;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}

JavaScript
function sticktothebottom() {
    let h = window.innerHeight;
    let window_top = $(window).scrollTop();
    let top = $('.dur').offset().top;
    let panelh = $(".whole").height();
    if (window_top + h > top ) {
        $('.whole').addClass('sticky');
        $('.dur').height($('.whole').outerHeight());
    } 
    
    if (window_top + top < panelh ) {
        $('.whole').removeClass('sticky');
        $('.dur').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothebottom);
    sticktothebottom();
});
Posted
Updated 12-Apr-21 21:53pm
Comments
Arfat M 12-Apr-21 4:49am
   
to avoid flickering use : .container-right {
float:left;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
erenerene 12-Apr-21 5:15am
   
Hi thank you for reply, but it does not work :(

1 solution

Try to avoid Javascript, and just use CSS. For example:
HTML
<div class="outer">
    <div>
        <div class="left">
            <p>LEFT</p>
        </div>
    </div>
    <div>
        <div class="right">
            <p>RIGHT</p>
        </div>
        <div class="footer-wrapper">
            <div class="footer">
                <p>FOOTER</p>
            </div>
        </div>
    </div>
</div>
CSS
.outer {
    /* Equal height columns */
	display: flex; 
}
.outer > div:nth-child(2){
    /* Apply the background colour to the column, not the content */
	background-color: #ee4444; 
    
    /* Make the column into a flex container */
	display: flex;
	flex-direction: column;
}
.footer-wrapper {
    /* Make the footer wrapper consume the available space */
	flex-grow: 1;
    
    /* Align the footer element to the bottom of the column */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.footer {
	/* Make the footer sticky */
	position: sticky;
	bottom: 0;
}
Demo[^]
position - CSS: Cascading Style Sheets | MDN[^]
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
   
Comments
erenerene 13-Apr-21 9:48am
   
Hi Richard! Thank you so much!!! It exactly solved my issue! My god! I'm waiting for a reply for weeks about this on forums!!! Hope you'll have the best day today :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900