CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jerielle
Jerielle

Reputation: 7520

How to unstick a floating div at the bottom when footer tag is detected?

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

Upvotes: 1

Views: 694

Answers (1)

Joe Kdw
Joe Kdw

Reputation: 2261

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

Upvotes: 1

Related Questions