Scroll and sticky Nav

Support
#1

Hello,
I am struggling to do this:
I have the website logo on a sticky navigation bar that shrinks when scrolling down. The logo has a normal size when we are not scrolling, but when we scroll down and the sticky nav bar shrinks, I would like the logo to also shrink.
I already watch your video: Themeco 101: Effects Module
But I can’t figure how to do what I want.

Eventually, I would also like that logo to disappear when the footer is on view since I also have a logo there, so I don’t have two logos on view

Please help :slight_smile:

These are the values I have on the Effects module:
SCROLL

Transform
In:
Opacity: 1
Filter: none
Transform: Scale: 0.5, 0.5 , 0,5
Offset: 100px

Out:
Opacity: 1
Filter: none
Transform: Scale: 1,1,1
Offset: 20px

Behavior: In-Out

And you can see the site here:

The logo I am talking about is the XBureau on white on the top left.

Thanks,
Ivan

#2

Hello Ivan,

Thanks for writing in!

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at Object.updateSlideBGs (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:38:196025)
    at Object.slideAnimFinished (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:38:218617)
    at e.onComplete (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:38:221609)
    at ce (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:8252)
    at e.n.render (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:23681)
    at e.n.render (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:22851)
    at e.n.render (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:22851)
    at bt (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:2149)
    at Array.e.updateRoot (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:27462)
    at t (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:11281)
VM42:319 edge Translation started
translateInternal @ VM42:319
2rs6.min.js?ver=6.5.3:38 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at Object.updateSlideBGs (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:38:196025)
    at m (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:68885)
    at HTMLElement.<anonymous> (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:4347)
    at Function.each (https://xbureau.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:2976)
    at s.fn.init.each (https://xbureau.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:1454)
    at s.fn.init.revredraw (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:4331)
    at e.<anonymous> (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:102699)
    at ce (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:8252)
    at https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:34677
    at e.n.render (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:34770)
xbureau.com/:1 GET https://xbureau.com/wp-content/uploads/revslider/video-media/New_Master_9_52_layer1.jpeg 404 (Not Found)
rs6.min.js?ver=6.5.3:38 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at Object.updateSlideBGs (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:38:196025)
    at m (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:68885)
    at HTMLElement.<anonymous> (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:4347)
    at Function.each (https://xbureau.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:2976)
    at s.fn.init.each (https://xbureau.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:1454)
    at s.fn.init.revredraw (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:4331)
    at e.<anonymous> (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.5.3:36:102699)
    at ce (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:8252)
    at https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:34677
    at e.n.render (https://xbureau.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.5.3:21:34770)

There is a JS error on the page which could be the reason why the effects module was not applied to your logo. The JS error seems to have come from your slider. Please check your slider or at least temporarily disable it while we are resolving your scroll and sticky nav issue.

And for the logo to disappear when the footer is on view requires custom JS coding that will monitor the scroll events and the location of the footer. Regretfully this is already beyond the scope of our support. You may need to contact a 3rd party developer to do the coding for you if you are not familiar with JS and custom coding.

Best Regards.

#3

Thank you Ruenel,
I just disable the slider.
Let me know it that helps to see what the issue is
Thanks
Ivan

#4

Hi Ivan,

I don’t think you need to use the effect module for this, have you tried the Scaling option on the image/logo? If not, please do so.

Let us know how it goes,
Thanks,

#5

Hi,
I will try that.
My version of X Pro looks like you screenshot, but I am not sure how those options work, since when I put scaling, nothing happens to the image of the logo.
I look at your documentation, and the options for the Image looks like this


Very different than the screenshot.
I am not sure if my version is old, or the documentation needs to be updated.
Do you know where I can find information on what this Set up options do?
Thanks,
Ivan
#6

Hi Ivan,

Sorry forgot to mention, that the scaling option on the image element is only available on the Header builder, for this very situation that you’re having right now. So the way that works is the image scale base on the width/height of its container/bar. So if the Bar shrinks, the image with the scaling option on should shrink as well.

This one needs customization, you need a script that when the page reaches the bottom, apply a display: none; on the logo, regretfully we can not provide custom code.

Thanks,

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.