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

Jquery – Positioning a fixed element to another not fixed element while scrolling

I have a button (#phone-bar) with position: fixed and i need it with bottom: 0 when the footer is not completely visible. The button is inside the footer itself but i can move it.

What i have now:

The unwanted gap

What i have now

jQuery(window).on("scroll load", function (e) {
    let footerH = jQuery('#footer').prop('scrollHeight');
    let windowTop = jQuery(window).scrollTop() + window.innerHeight;
    let footerTop = jQuery('#footer').offset().top;

    //footer visibile
    if (windowTop >= footerTop) {
        jQuery("#phone-bar").removeClass("pbNoFooter");
    //footer non visibile
    } else {
        jQuery("#phone-bar").addClass("pbNoFooter");
    }
});

<footer id="footer" role="contentinfo">
    <div id="footer-content">
        <div class="container">
            xxxxxx xxxxxx xxxxxx xxxxxx
            <br>
            xxxxxx xxxxxx
        </div>
    </div>
    <div id="phone-bar" class="open">
        <a class="phone-bar-label" href="#">
            <span class="glyphicon glyphicon-earphone phone-icon"></span>
            %s
            <span class="glyphicon glyphicon-chevron-up"></span>
            <span class="glyphicon glyphicon-chevron-down"></span>
        </a>
    </div>
</footer>

#phone-bar {
    background: transparent;
    padding: 0 15px;
    position: fixed;
    width: 100%;
    top: auto;
    bottom: 96px;
    z-index: 1;
    overflow-y: auto;
}

#phone-bar.pbNoFooter {
    bottom: 0;
}

@media screen and (min-width: 862px) {
    #phone-bar {
        bottom: 77px;
    }
}

With my code it’s partially working, because at some point i have a visible gap while footer is not completely visible.

EDIT1:

I don’t need css only solution, i want to know how to calculate dynamically the bottom value to use.

EDIT2:

The html structure and css:

<body>
    <header/>
    <nav/>
    <div class="container main-content-block"/>
    <foooter>
        <div id="phone-bar"/>   <!--can be moved outside footer-->
    </footer>
</body>

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-content-block {
    flex: 1;
    width: 100%;
}
Tags:

2

Answers


  1. 0

    As you can move the element in your html, you can use sticky positioning to make it fixed at the bottom until it hits the footer.
    Here is a simple example :

    .wrap {
  position: relative;
  background: teal;
}
.content {
  height: 150vh;
}
.button {
  position: sticky;
  bottom: 0;
  left:0;
}
.footer {
  background: pink;
}
    <div class="wrap">
  <div class="content">Content</div>
  <button class="button">Button</button>
</div>
<footer class="footer">Footer</footer>

    The point is to put your sticky element as a child of the main content instead of the footer and use : position: sticky; bottom: 0;

    Login or Signup to reply.
  2. 0

    To dynamically calculate the bottom value for your button (#phone-bar) based on the visibility of the footer, you can modify your JavaScript code as follows:

    jQuery(window).on("scroll load", function (e) {
  let footerH = jQuery("#footer").outerHeight(); // Get the height of the footer including padding and border
  let windowTop = jQuery(window).scrollTop() + window.innerHeight;
  let footerTop = jQuery("#footer").offset().top;

  // Calculate the distance between the window bottom and the footer top
  let distance = windowTop - footerTop;

  // Set the bottom value based on the visibility of the footer
  if (distance >= footerH) {
    jQuery("#phone-bar").removeClass("pbNoFooter");
  } else {
    jQuery("#phone-bar").addClass("pbNoFooter");
  }
});

    In this code, the footerH variable is used to store the height of the footer, including any padding and border. The distance variable calculates the vertical distance between the bottom of the window and the top of the footer. If the distance is greater than or equal to the height of the footer (footerH), it means that the footer is not completely visible.

    With this approach, the bottom value of #phone-bar is set dynamically based on the visibility of the footer. The pbNoFooter class is added or removed accordingly, allowing you to apply different styles to the button as needed.

    Make sure to adjust your CSS styles for #phone-bar.pbNoFooter to achieve the desired positioning.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search