www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide header on slide problem

  1. #1
    Join Date
    May 2010
    Posts
    4

    Hide header on slide problem

    Hi there,

    I have put together some Js to make the header slide up when the user scrolls down and when the scrolls up the header slides back in. Here is the site so you can understand what I mean http://psnew.websitedesignmockup.com/ .

    The problem is I want to tell the JS not to hide when scrolling down until about 300 pixels. Also when scrolling down for the header not to scroll up straight away maybe after 5px. I am trying to replicate the mailchimp header as it is pretty awesome. Here is the code I have so far :-

    [CODE]
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    var up = false;
    var newscroll;
    mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
    $('.header').stop().delay(300).slideUp('fast');
    up = !up;
    console.log(up);
    } else if(newscroll < mypos && up) {
    $('.header').stop().slideDown('fast');
    up = !up;
    }
    mypos = newscroll;
    });
    [CODE]

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #header {
      position:fixed;z-Index:101;left:0px;top:0px;width:100%;height:80px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <div id="header" ></div>
    <div style="height:3000px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Hide Header  (02-October-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcHideHeader={
    
     init:function(o){
      var id=o.HeaderID,ht=o.HideTop,st=o.ShowTop,ms=o.Animate,h=document.getElementById(id);
      if (h){
       o.h=[h,'top',-h.offsetHeight-2,0];
       o.ht=typeof(ht)=='number'?ht:0;
       o.st=typeof(st)=='number'?st:o.ht;
       o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
       this.addevt(window,'scroll','scroll',o);
      }
     },
    
     scroll:function(o){
      var t=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
      if ((t>o.ht&&o.h[3]==0)||(t<o.st&&o.h[3]!=0)){
       this.animate(o,o.h,o.h[3],t>o.ht?o.h[2]:0,new Date(),o.ms);
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=n;
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    
    zxcHideHeader.init({
     HeaderID:'header', // the unique ID name of the 'header' element.  (string)
     HideTop:500,       // the scroll top to hide the 'header' element. (number)
     ShowTop:200,       // the scroll top to show the 'header' element. (number)
     Animate:1000       // the animation duration in milli seconds.     (number)
    });
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2010
    Posts
    4
    Hi Vic,

    Thats great thank you. Is there anyway to make the header slide into view if the user scrolls upwards anywhere on the page. So the user doesn't have to scroll up to the top of the page to see the menu. Again thanks for your reply greatly appreciated.

    Many Thanks
    J

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #header {
      position:fixed;z-Index:101;left:0px;top:0px;width:100%;height:80px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <div id="header" ></div>
    <div style="height:3000px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Hide Header  (03-October-2013)
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcHideHeader={
    
     init:function(o){
      var id=o.HeaderID,ht=o.HideTop,st=o.ShowTop,ms=o.Animate,h=document.getElementById(id);
      if (h){
       o.h=[h,'top',-h.offsetHeight-2,0];
       o.ht=typeof(ht)=='number'?ht:0;
       o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
       o.t=0;
       o.ud=false;
       this.addevt(window,'scroll','scroll',o);
      }
     },
    
     scroll:function(o){
      var t=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop,ud=t>o.t;
      if ((t>o.t&&t>o.ht&&o.ud!=ud)||(t<o.t&&o.ud!=ud)){
       o.ud=ud;
       this.animate(o,o.h,o.h[3],ud?o.h[2]:0,new Date(),o.ms);
      }
      o.t=t;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=n;
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    
    zxcHideHeader.init({
     HeaderID:'header', // the unique ID name of the 'header' element.  (string)
     HideTop:500,       // the scroll top to hide the 'header' element. (number)
     Animate:1000       // the animation duration in milli seconds.     (number)
    });
    
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles