Delete this Post @ https://forum.freecodecamp.org/t/hide-an-element-when-i-scroll-up-a-certain-number-of-pixels/209507

1

Noone provided a good method or guidance for solving the problem I was having at the following link: Hide an Element When I Scroll up a Certain Number of Pixels. Therefore, that post is of no help to anybody, so it needs to be deleted. I solved the problem on my own.

3 
//.......when "Portfolio" button is pressed, page scrolls to center image and light-box appears/..................

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

/*var output = document.getElementById('output')*/

//.........when scrolling page back up from light-box appearance area, light-box disappears....(http://editor.javascriptkit.com/?eg=scrolltop-pct2) & 

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'*/
  
 /* after drop-light becomes visible via pressing the "Portfolio button", now when you scroll up from there, it disappears, leaving only the blinking lights on the "Portfolio" button*/
  if(pctScrolled <= 35){
    $(".drop-light").hide();
  }else{
    console.log('The drop-down showed');
  }
}

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)