How to Prevent Fixed Button from Overlapping Footer Area and Stop the Button on Top of Where the Footer Is Located

How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

Updated now so that it sticks above footer.

Hope this is what you meant
The jQuery:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
       $('#button').addClass('fixed_button');
   }else{
       $('#button').removeClass('fixed_button');
   }
});

CSS:

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: auto !important;
}

How to fix a footer overlapping content?

Change this:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo

Re-Positioning Scroll to Top Button when Footer appears (So it never overlaps)

I think this is what you're looking for. Let me know! CodePen

$(document).ready(function(){// Should cache elements here for continuous accessconst footer = $(".footer");const scrollBtn = $("#back-to-top"); const padding = 25; // So you can change this is one value $(window).scroll(function () {    // Where we're gonna set the button's height  var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());  // Check to see if we're within the footer range  if ( distanceFromBottom <= footer.height() ) {    console.log(distanceFromBottom);    scrollBtn.css("bottom", (footer.height() - distanceFromBottom) + padding);   } else {    scrollBtn.css("bottom", padding);   }   if ($(this).scrollTop() > 50) {    $('#back-to-top').fadeIn();   } else {    $('#back-to-top').fadeOut();   }  });  // scroll body to 0px on click  $('#back-to-top').click(function () {   $('body,html').animate({    scrollTop: 0   }, 400);   return false;  });});

html { position: relative; min-height: 100%;}

body { background-color: #3498db; color: #ecf0f1;}
.back-to-top {    position: fixed;    bottom: 25px;    right: 25px;    display: none;   z-index: 99;}
.footer { position: absolute; width: 100%;      height: 4rem;   /* Set the fixed height of the footer here */ line-height: 4rem; /* Vertically center the text there */ background-color:#292929; text-align: right; color: #fff;  padding-right: 2rem; bottom: 0;   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container"> <div class="row justify-content-center text-center">  <div class="col-8 my-5">   <p class="h5">Hello!</p>   <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">   <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">   <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">   <img src="http://via.placeholder.com/900x300" class="img-fluid rounded alt="">     </div> </div></div><a id="back-to-top" href="#" class="btn btn-light btn-lg back-to-top" role="button"><i class="fas fa-chevron-up"></i></a>                                  <footer class="footer">Copyright </footer>

Make Fixed Position Div Stop before footer

What you should do is use the position: sticky; CSS property, along with specifying top. You will not need to use JavaScript at all.
Here's a snippet:

.footer {
  height: 1000px;
}

.container {
  height: 1000px;
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="container">
  <div class="sticky">Sticky bar</div>
</div>

<div class="footer">Footer</div>

How can I resolve my footer overlapping the body content?

Set height: auto

.a-box{
    position:relative;
    width:200px;
    height:auto; /* this was 200px */
}

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

Add the following property in your css classname

.nav {
    position: relative;
    z-index: 1000;
    ...previous properties
}

Stop fixed position at footer

Live demo

first, check its offset every time you scroll the page

$(document).scroll(function() {
    checkOffset();
});

and make its position absolute if it has been downed under 10px before the footer.

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

notice that #social-float's parent should be sibling of the footer

<div class="social-float-parent">
    <div id="social-float">
        something...
    </div>
</div>
<div id="footer">
</div>

good luck :)

Overlapping of footer by element with fixed position

I've used the following plugin for this exact task before: http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/

It worked perfectly.

Also here is the GitHub project: https://github.com/p-m-p/jQuery-Stickybox

The general term for the solution you need is a sticky sidebar. There are various jQuery plugins and tutorials with varying techniques for achieving this effect. A Google search for "jquery sticky sidebar" will reveal plenty.

How do I stop a fixed sidebar from overlapping the footer with jQuery?

This correct answer was provided by benvc on this post. Sorry for the duplicate. I wanted to post the answer here in case anyone landed on this page rather than the other.

...below is a jquery solution using your code with new jquery for the sticky sidebar widget and css to make the sidebar widget position: absolute and right: 30px (that value is arbitrary depending on where exactly you want the widget to sit inside the sidebar). Also, commented out a few other css lines that either weren't doing anything or interfered with the responsiveness of your grid layout (sticky sidebar functionality works with or without those changes, although you may need to adjust the right css of your widget element, including media queries, depending on where your layout ultimately ends up).

$(function() {
  const sidebar = $('.sidebar-container');  const widget = $('.widget');  const footer = $('.footer');  const space = 10; // arbitrary value to create space between the window and widget  const startTop = sidebar.offset().top + 60; // arbitrary start top position  const endTop = footer.offset().top - widget.height() - space;    widget.css('top', startTop);    $(window).scroll(function() {      let windowTop = $(this).scrollTop();    let widgetTop = widget.offset().top;    let newTop = startTop;      if (widgetTop >= startTop && widgetTop <= endTop) {      if (windowTop > startTop - space && windowTop < endTop - space) {        newTop = windowTop + space;      } else if (windowTop > endTop - space) {        newTop = endTop;      }      widget.stop().animate({        'top': newTop      });    }    });  });

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');* {  font-family: 'Open Sans';  color: #fff;  box-sizing: content-box;}
body {  padding: 0;  margin: 0;}
p {  margin: 20px;}
hr {  width: 85%;  border-style: solid;}
.main-content {  width: 100%;  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-template-rows: 150px auto;  grid-template-areas: "nav nav nav nav" "main main main sidebar";  grid-column-gap: 20px;  grid-row-gap: 0px;}
.nav {  grid-area: nav;  background-color: #266392;  display: grid;  grid-template-columns: 1fr 3fr 1fr;}
.nav h1 {  place-self: center;  font-weight: 400;  font-size: 40px;  grid-column: 2;}
.nav i {  align-self: center;  font-size: 40px;}
.main {  height: 1500px;  /*width: 98%;  justify-self: start;*/  grid-area: main;  padding: 10px;  /*float: left;*/  background-color: #e8624c;  margin: 10px;}
.sidebar-container {  height: 900px;  width: 300px;  justify-self: end;  background-color: #209B66;  grid-area: sidebar;  grid-column: 4;  /*top: 10px;*/  margin: 10px;  padding: 20px;  display: grid;  grid-template-rows: auto;  grid-row-gap: 10px;}
.sidebar-container>p {  display: grid;  align-items: start;  padding: 0;  margin: 0;}
.widget {  height: 500px;  width: 300px;  background-color: #E3962F;  position: absolute;  right: 30px;}
.footer {  background-color: #333;  height: 800px;}

<body>  <div class="main-content">    <div class="nav">      <h1>Sticky Sidebar Problem</h1>      <i class="fa fa-arrow-down" aria-hidden="true"></i>    </div>    <div class="main">      <p>        [Main Content]      </p>
    </div>    <div class="sidebar-container">      <p>[Sidebar Container]</p>
      <div class="widget">        <p> [Widget]</p>      </div>    </div>  </div>  <div class="footer"></div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></body>

---

Related Topics