Hide an Element When I Scroll up a Certain Number of Pixels

JavaScript
1

Hi folks,

I created a UX in which an element is displayed only when the user clicks on a button. Now I want that when the user is scrolling up from that area, that that element becomes hidden?

Here is code that I currently have:

 $("#tell-state").click(function(){
        alert("Here's something new.");
   $(".drop-light").show();
    });

$(window).bind('scroll', function() {
     if ($(window).scrollBottom() > 100) {
         $(".drop-light").hide();
     }
});

And here is some new code that I’m considering:

var output = document.getElementById('output')

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
}

var winheight, docheight, trackLength, throttlescroll

function getmeasurements(){
	winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
	docheight = getDocHeight()
	trackLength = docheight - winheight
}

function amountscrolled(){
	var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
	var pctScrolled = Math.floor(scrollTop/trackLength * 100) // gets percentage scrolled (ie: 80 or NaN if tracklength == 0)
	output.innerHTML = pctScrolled + '% scrolled'
}

getmeasurements()

window.addEventListener("resize", function(){
	getmeasurements()
}, false)

window.addEventListener("scroll", function(){
	clearTimeout(throttlescroll)
		throttlescroll = setTimeout(function(){ // throttle code inside scroll to once every 50 milliseconds
		amountscrolled()
	}, 50)
}, false)

This last code is almost perfect, but I don’t know how to integrate it within my code! It outputs a percentage of how much you have scrolled, but I need it do something when it reaches a certain percentage…For example, lets say, at 50% scroll, I want to hide my element. How can I accomplish that?

Thanks in advance for your help!

2

I have used Waypoints.JS to trigger animations on scroll. You might want to check it out.

http://imakewebthings.com/waypoints/guides/getting-started/
3

@s_coder, thanks for that tidbit, but I like to try not to use too much libraries as dependencies. I’d love to achieve my goal in vanilla javascript or jquery right now…maybe I’ll try that later. Thanks alot for your help!

5

@camperextraordinaire, yeah true, but it’s like a basic common library…hahaha…

6

@camperextraordinaire,

This is the scenario: I have a function that tracks what percentage I have scrolled in my window. I want to integrate into this a certain function, such as $(".drop-light").hide(); that goes into effect at a certain percentage, say 10% for example. Currently I have my webpage set up so that when you click on the “portfolio” button, $(".drop-light").show(); occurs. Now after that, I want to hide it once I scroll up a certain amount on my page. I’m having problems trying to get such a function to work. Thanks in advance for your help!