Fixed div on scroll jquery example

Fixed div on scroll jquery example

March 3, 2021 Pakainfo jQuery, JavaScript Leave a comment

Today, We want to share with you fixed div on scroll jquery example.In this post we will show you make div fixed after scrolling, hear for Set a fixed element and scroll another – jQuery we will give you demo and example for implement.In this post, we will learn about Fixed Sticky Header Scrolling In JQuery with an example.

smooth sticky header on scroll jquery

Contents

Example 1: index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Sticky - www.pakainfo.com</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<style>
  .fixedElement {
    position: fixed;
    background-color: skyblue;
    top: 0;
    left: 0;
    right: 0;
  }
 
  html,
  body {
    height: 1000px;
 
  }
 
  #scrollDemo {
    position: relative;
    top: 500px;
  }
</style>
 
<body>
  <div class="fixedElement">
    Fixed
  </div>
  <div id="scrollDemo">
    David Miller
  </div>
</body>
<script>
  window.scrollTo(0, document.getElementById('scrollDemo').offsetTop - document.getElementsByClassName('fixedElement')[0].offsetHeight);
</script>
 
</html>

fixed div with scrollable content

.fixed-content {
    overflow-y:scroll;
    overflow-x:scroll;
}

Example 3: index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#stickThis {
    padding: 5px;
    background-color: #ccc;
    font-size: 1.5em;
    width: 300px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #444;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
</style>
<script>
function sticktothetop() {
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
        $('#stick-here').height($('#stickThis').outerHeight());
    } else {
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});
</script>
</head>
<body>

tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />
tamilrokers <br />

</body>
</html>

I hope you get an idea about jquery position div fixed at top on scroll.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.