[Alejandro Jose SParticipant]

Hello,

i added this code (found here in the forum) on my custom JS to make the navbar appear only when scrolling up:

/* add navbar when scrolling up removes it when scrolling down */
jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop > tempscroll){ //Remove fixed positioning when scrolling down
      if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) $('.x-navbar').removeClass('x-navbar-fixed-top')
   } 
   tempscroll = scrollTop;
});

} );

it works but i wanted to add some sort of toggle / slide up-down) effect when the user scrolled up or down (when the navbar appears/disappears).

Could you tell me how to achieve that?

[Rue NelModerator]

Hi There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Alejandro Jose SParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the information. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .x-navbar {
    top: -100px;
    transition: top 2s ease;
  }

  .x-navbar.x-navbar-fixed-top {
    transition: top 2s ease;
  }
}

Hope this helps.

[Alejandro Jose SParticipant]

Almost there. that css code has definitely help with the scroll up effect (although i had to make some changes for it to work, otherwise it wouldn’t show at the start of the page, initially).

When i scroll down other than at the beginning of the page, though, i don’t get the slide-up effect.

now here’s the modified JS and CSS

CSS:

/* menu transition */
@media(min-width: 980px){
  .slide-up {
    top: -100px;
    transition: top 4s ease;
  }

 .x-navbar.x-navbar-fixed-top {
    transition: top 1.5s ease
}

js:

jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop > tempscroll){ //Remove fixed positioning when scrolling down 
     if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ){
       $('.x-navbar').removeClass('x-navbar-fixed-top');
      }
   }
   tempscroll = scrollTop;
});
} );

Now, as you can see there’s a class called slide-up with the transition and if i add it to the JS it works ONLY at the beginning, it doesn’t work if i, say, scroll down in the middle of the page :/

same thing if i just added the original JS with the css you gave me. the code would work only at the beginning of the page, i i scrolled down somewhere else it wouldn’t show the transition effect.

[JoaoModerator]

Hi There,

I am getting an error when trying to access : discovermessina.it/wp-admin

Is it working on your end?

Thanks

Joao

[Alejandro Jose SParticipant]

The site is working fine.

It’s weird though, the code used to work for the scroll-up (slide down effect) before (when i posted the code) but it doesn’t anymore now. it shows the navbar but not the transition effect.

[LelyModerator]

This reply has been marked as private.

[Alejandro Jose SParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please set your navbar position to static top under Header in the customizer.

Then change your JS Code to this.

/* add navbar when scrolling up removes it when scrolling down */
jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop <= tempscroll){ 
       $('.x-navbar').slideDown( "slow", function() {
       });
   } else {
      $('.x-navbar').slideUp( "slow", function() {
       });
     
   }
   
});

} );

Hope that helps

[Alejandro Jose SParticipant]

Ok guys we’re almost there, you’ve been so helpful this far and for that i really really thank you!

So i found a site that helped me build the code, then i found a thread in here that mixed with parts of the code on this thread helped me achieve the transition effect. here’s the code:

jQuery( function($) {
	// Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta         = 5;
	var header        = $(".x-navbar");
	var navbarHeight  = header.outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

	setInterval(function() {
	    if (didScroll) {
	        hasScrolled();
	        didScroll = false;
	    }
	}, 250);

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // If they scrolled down and are past the navbar, add class .nav-up.
	    // This is necessary so you never see what is "behind" the navbar.
	    if (st > lastScrollTop && st > navbarHeight){
	        // Scroll Down
	        //header.removeClass('x-navbar-fixed-top').addClass('nav-up');
        $('.x-navbar').slideUp( "slow", function() {
        });

	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
            $('.x-navbar').slideDown( "slow", function() {       
            });
	        }
	    }
	    
	    lastScrollTop = st;
	}	
});

Now, the transition is set but the only thing missing is the navbar’s content (menu items and logo) that stays slides up with the transition. Right now the navbar’s content just seems to stay behind the transition effect and does not slides up with it.

if you check this site: https://www.chefsteps.com you’ll notice that when you scroll up, the entire navbar slides down (you notice that the content is also sliding down, not just the navbar’s container), same thing when you scroll down.

I believe that modification requires a small CSS tweaking but i wouldn’t know which class to modify since i know the class for the container but not for the elements in it :/. could you please give me a hand? as soon as this is done I’m definitely gonna share this thread with a lot of guys on the X theme forum over @ FB, this will certainly be a nice touch to your theme!

In the meantime, i thank you (again) for all the help received so far. You guys rock!

[RadModerator]

Hi there,

It won’t work, I’m 100% that it’s correctly pointed to your IP through hosts file. Confirmed it by pinging it,the login page works but once logging it, it will display IIS error. And it won’t finish logging it, how about disabling your coming soon page so we don’t need to login 🙂

Thanks!

[Alejandro Jose SParticipant]

Alright, no problem. removed the coming soon page.

The toolbar is not there in the homepage but you can try it out using this link instead: http://discovermessina.it/comuni_territorio/messina/

[Rue NelModerator]

Hello There,

Since I could not modify your navbar class setup, I will just let you try this custom css I have taken from the example website.

.nav-visible {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease 400ms;
    transition: transform ease 400ms;
}

.nav-fixed {
    position: fixed;
    -webkit-transform: translate3d(0, -76px, 0);
    transform: translate3d(0, -76px, 0);
    -webkit-transition: -webkit-transform ease 400ms;
    transition: transform ease 400ms;
}

.nav-fixed.nav-hidden {
    visibility: hidden;
    opacity: 0;
}

Feel free to apply this to your customizations. Please let us know how it goes.

[Alejandro Jose SParticipant]

Awesome, that with a small mod did it!

for the next readers of this thread: you just need to add this code on the customizer’s custom css section:

/* Navbar hides on scroll down appears on scroll up */

.nav-visible {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease 2.3s; //changes speed of scrolling up
    transition: transform ease 400ms;
}
.nav-fixed {
    position: fixed;
    -webkit-transform: translate3d(0, -76px, 0);
    transform: translate3d(0, -76px, 0);
    -webkit-transition: -webkit-transform ease 2s; ////changes speed of scrolling down
    transition: transform ease 400ms;
}

Now add this code on the customizer’s Custom JS Section:

jQuery( function($) {
	// Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta         = 5;
	var header        = $(".x-navbar");
	var navbarHeight  = header.outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

	setInterval(function() {
	    if (didScroll) {
	        hasScrolled();
	        didScroll = false;
	    }
	}, 250);

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // If they scrolled down and are past the navbar, add class .nav-up.
	    // This is necessary so you never see what is "behind" the navbar.
	    if (st > lastScrollTop && st > navbarHeight){
	        // Scroll Down
	        //header.removeClass('x-navbar-fixed-top').addClass('nav-up');
        if ( header.hasClass('nav-fixed') ){
          header.removeClass('nav-visible');
        }
        header.addClass('nav-fixed');
        
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
            if ( header.hasClass('nav-fixed') ){
            	header.removeClass('nav-fixed');
            }
            header.addClass('nav-visible');
	        }
	    }
	    
	    lastScrollTop = st;
	}	
});

enjoy!

Thank you very much guys for the support, as always, you (and themeco in general) totally rock =D

[Author]

Posts