1

I am creating an effect in my page. I have a news page and what I want is if the user scroll the page there will be a floating div with a button at the bottom of the screen. It should stick at the bottom of the screen. But it will stick until it hasn't reached the footer content. I don't know how to do this. Can you help me with this?

Here's a bit of my codes:

HTML:

<header>Header Goes Here</header>
<div class="container">
    <div class="news">
       <p>Very long content here...</p>
    </div>
</div>
<div class="floating_content">
    <button>Next Page</button>
</div>
<footer>Footer Here</footer>

CSS:

header { 
    height: 50px; 
    background: #ccc; 
    color: #fff; 
    text-transform: uppercase;
    padding: 5px;
    font-family: verdana;
    text-align: center;
}

.news { padding: 10px }

.floating_content {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
    text-align: center;
    background: #ccc;
}
footer {
    background: #000;
    color: #fff;
    text-align: center;
    height: 50px
}

JQuery:

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".floating_content").removeAttr('style');
        //$(".fix_content").css('margin-bottom':'174px');
    } else {
        $(".floating_content").css({'position':'fixed','bottom':'0','width':'100%','z-index':'99'});
    }
});

Here's my fiddle:JSFiddle

nickles80
  • 1,101
  • 8
  • 10
Jerielle
  • 7,144
  • 29
  • 98
  • 164
  • possible duplicate of [Float a div at the bottom right corner, but not inside footer](http://stackoverflow.com/questions/18455453/float-a-div-at-the-bottom-right-corner-but-not-inside-footer) – Nathan Tuggy May 08 '15 at 02:32

1 Answers1

1

UPDATED:

$(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $(".floating_content").show();
   }
});

UPDATED2:

I'm trying to set and change the position in floating-content into relative as in:

.floating_content {
    display: none;
    position:relative; //here
    bottom: 0;
    width: 100%;
    padding: 5px;
    text-align: center;
    background: #ccc;
}

Updated Jsfiddle here

Joe Kdw
  • 2,245
  • 1
  • 21
  • 38
  • Sorry but it doesn't work. I want place the floating div in the top of the footer. If the footer is displayed in the browser. – Jerielle Feb 05 '15 at 04:01
  • Sorry it doesnt what I want. What I want is the floating div will be hide first. Then if the user scroll the page the floating div will be displayed at the bottom of the browser not by the page itself. Then when scrolling the floating div is stick at the bottom of the browser then until it reaches the top part of the footer then it will stay at the top of the footer. Then if the user scroll up the page the floating div will be at the bottom of the page again. – Jerielle Feb 05 '15 at 05:34