Hide an image when scroll near bottom

509
January 11, 2017, at 1:06 PM

I have a problem with my web. I add an image in the right of my content and I set it's style with position:fixed, but when I scroll down to my web's footer, this image is pressed by my web's footer. So how can I do to hide this image when this is near my web's footer or this image stack up my web's footer? Thanks for your help!!

Answer 1

Hide the element when $(document).height()-$(window).scrollTop() less than a particular value

Demo:-

$(document).ready(function () { 
    $("#scrolldown").show('slow'); 
 
    $(window).scroll(function (e) { 
        e.preventDefault(); 
        //console.log($(document).height()+'-'+$(window).scrollTop()); 
        if ($(document).height()-$(window).scrollTop() < 500) { 
            $("#scrolldown").hide('slow'); 
        } 
        else { 
            $("#scrolldown").show('slow'); 
        } 
    }); 
});
#pagewrap{ 
  height:1000px; 
} 
#scrolldown { 
    position: fixed; 
    color: white; 
    padding: 10px 30px; 
    background: red; 
    bottom: 30px; 
    right: 30px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="pagewrap"> 
	<h1>Demo</h1> 
	<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">test</a></h2> 
<div id="scrolldown"> 
  i ll hide @ bottom 
</div> 
 
</div>

Answer 2

Try using: Position: relative; left: 0px; right: 0px; adjust to fit

Rent Charter Buses Company
READ ALSO
How to style checkbox using CSS?

How to style checkbox using CSS?

I am trying to style checkbox using the following:

917
chage ui grid row using arrow keys , select using spacebar and give visual appearance to user for navigation and selection using css

chage ui grid row using arrow keys , select using spacebar and give visual appearance to user for navigation and selection using css

I have ui grid in my applicationI want to give visual appearance to user if grid is accessed using keyboard , user is able to navigate in grid using up/down key , can select the row using spacebar

443
Unwanted Space in Border Transition

Unwanted Space in Border Transition

I made a border transition for a div in CSS that basically has the border become visible in a clock-work manner

420
Change Image Slider Caption to Static

Change Image Slider Caption to Static

I have a jquery slider called pgwslidemasteri want to show the slider caption in a div that can to change it and add a tag to that

411