Difference between revisions of "Template:WLC-Milwaukee/header"

Line 35: Line 35:
 
     window.onscroll = function() {
 
     window.onscroll = function() {
 
       var currentScrollPos = window.pageYOffset;
 
       var currentScrollPos = window.pageYOffset;
 +
      //If At (or above @safari) the top
 +
      if(currentScrollPos <= 0 ) {
 +
 +
        document.getElementById("navbar").style.top = "10px";
 +
        $(".dropdown").removeClass("nomouse");
 +
        if(!$(".dropdown").is(":visible"))
 +
        {
 +
 +
          $(".navigation").show();
 +
        }
 +
        else { $(".navigation").css("display", "");}
 +
        return;       
 +
      }
 +
 +
      //If Scrolling Up
 
       if (prevScrollpos > currentScrollPos) {
 
       if (prevScrollpos > currentScrollPos) {
 
         document.getElementById("navbar").style.top = "10px";
 
         document.getElementById("navbar").style.top = "10px";
Line 44: Line 59:
 
         }
 
         }
 
         else { $(".navigation").css("display", "");}
 
         else { $(".navigation").css("display", "");}
       } else {
+
       }  
 +
      //If Scrolling Down
 +
      else {
 
         if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
 
         if($(".navigation").hasClass("open"))if(!$(".dropdown").is(":visible")){return;}
 
         document.getElementById("navbar").style.top = "-45px";
 
         document.getElementById("navbar").style.top = "-45px";
Line 60: Line 77:
 
});
 
});
  
/////////////////////////////////////////////////////////////
 
  
//SCROLLING JS//
 
/*
 
From: https://github.com/luster-io/prevent-overscroll/blob/master/index.html
 
Purpose: Disable elastic scrolling effect in mobile Safari
 
*/
 
  
var overscroll = function(el) {
 
  el.addEventListener('touchstart', function() {
 
    var top = el.scrollTop
 
      , totalScroll = el.scrollHeight
 
      , currentScroll = top + el.offsetHeight
 
    //If we're at the top or the bottom of the containers
 
    //scroll, push up or down one pixel.
 
    //
 
    //this prevents the scroll from "passing through" to
 
    //the body.
 
    if(top === 0) {
 
      el.scrollTop = 1
 
    } else if(currentScroll === totalScroll) {
 
      el.scrollTop = top - 1
 
    }
 
  })
 
  el.addEventListener('touchmove', function(evt) {
 
    //if the content is actually scrollable, i.e. the content is long enough
 
    //that scrolling can occur
 
    if(el.offsetHeight < el.scrollHeight)
 
      evt._isScroller = true
 
  })
 
}
 
//overscroll(document.querySelector('.scroll'));
 
document.body.addEventListener('touchmove', function(evt) {
 
  //In this case, the default behavior is scrolling the body, which
 
  //would result in an overflow.  Since we don't want that, we preventDefault.
 
  if(!evt._isScroller) {
 
    evt.preventDefault()
 
  }
 
})
 
 
</script>
 
</script>
  

Revision as of 18:47, 17 October 2018

PLACEHOLDER