Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 168
  • Last Modified:

How to make floating back to top button not float over footer

I have created this jsfiddle with a floating back to to top button.
At the bottom of the page is a footer with 5 headings.
I want to be able to make the button be in a fixed position until reaching footer after which it goes up.
I am trying to imitate the functionality of back to top button at http://www.sony.com/all-electronics
I am terrible at jquery and javascript so please don't change the jquery already present in the jsfiddle
Rather add more below to make it do what I want.
Any help much appreciated.
Thanks in advance.
https://jsfiddle.net/h5Lt2dv3/
0
Usman Sikander
Asked:
Usman Sikander
1 Solution
 
RobOwner (Aidellio)Commented:
I've updated the fiddle: https://jsfiddle.net/voz8p8w6/1/

you just need to detect when the footer element comes into view and make the floating "UP" fixed

Added to your backToTop function
var _height = scrollTop + window.innerHeight;
            if (_height > $('footer').offset().top) {
            	$('#back-to-top').addClass('fixed');
            }
            else {
            $('#back-to-top').removeClass('fixed');
            }

Open in new window

CSS
#back-to-top.fixed {
  position: relative;
  float: right;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now