0

I just included a "back-to-top"-button to my website.

HTML:

<div class="scroll-top scroll-is-not-visible">
  <a href="#0"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
</div>
<footer class="site-footer">
 ...
</footer>

CSS:

.scroll-top{
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-is-not-visible{
  visibility: hidden
}
.scroll-is-visible{
  visibility: visible
  opacity: 1
}
.scroll-fade-out{
  opacity: .5
}

The different classes are added or removed by jQuery. Everything works well, but if I scroll down completely, the button (logically) overlaps the footer and hides the text behind it.

My question is, how I can edit my code to display the button at the defined position as long as the footer is not in the viewport and as soon as the footer enters the viewport the button should stay 50px above the footer-container. So if the footer is in the viewport, the button should scroll with the content.

I don't know if this is understandable, so please comment if you do not get what I mean.

Thanks in advance!

Sam
  • 243
  • 5
  • 16
  • probably going to need to add more relevant code.. the html and such – wizloc May 02 '16 at 19:57
  • You will need to incorporate javascript for a solution like this. Detect the window scroll position and adjust accordingly. – Wes Foster May 02 '16 at 20:01
  • `$(window).scrollTop() + $(window).height() == $(document).height()` will check if is bottom.. you can play with the values to check the best position for you.. adding the event when scrolling, you can add the `margin`. – Hugo S. Mendes May 02 '16 at 20:04
  • This link might help you: http://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom. – andreivictor May 02 '16 at 20:05
  • Foundation has this called sticky: http://foundation.zurb.com/sites/docs/sticky.html – Randy May 02 '16 at 20:12

1 Answers1

0

Using jQuery, you can determine the point in the window scroll at which the button obscures the footer and then write javascript/jquery that accounts for this. I've done something here: http://codepen.io/babzcraig/pen/QNJrye which you can play with. The code would look something like this:

HTML:

<div class="container">
  <h2>Here's Your Content... bla bla bla<h2>
  <button id="btn">Click Me</button>
</div>
<div class = "footer">
  <p>This is Your Footer</p>
</div>

CSS:

.container {
  background-color: pink;
  height: 1000px;
  margin-bottom: 0px;
}

#btn {
  margin-left: 100px;
  width: 50px;
  height: 50px;
}

.footer {
  background-color: yellow;
  margin-top: 0px;
  height: 200px;
}

p {
  padding: 30px;
  font-family: roboto;
}

JS:

$(document).ready(function() {

  function getScroll() {
    var btnScroll = $(window).scrollTop();
    console.log(btnScroll);
    if (btnScroll < 450) {
      $("#btn").css({"position":"fixed","margin-top": "450px"})
    } else {
      $("#btn").animate({"position":"fixed","margin-top": "200px"}, 400)
    }

  }

  setInterval(function(){getScroll();}, 500);
});

Your numbers would be different based on your particular design but if you pay around with the numbers a bit, you'll find what works. I used a .animate() method in the else block so that you get a smoother transition that using just a css declaration. Let me know if this helps.

Babasanya Craig
  • 11
  • 2