Navbar Resize on Scroll....

Hello everyone...

Hopefully someone can help me with this. I searched the forum and online but found no instructions anywhere. Sorry if I missed it and am asking a redundant question.

I need to know how: I create the logo and navbar header, large logo to start and then when you begin to scroll down the page, it automatically changes to a smaller logo and the navbar buttons and a color rectangular background stick at the top of the page as all content scrolls underneath. I am sure it is done with a trigger and stick at top or something, but I have tried for a while and can't seem to get the correct configuration....

Like this: https://ericvwray.com/

Any instructions would be greatly appreciated as always. Thank you,

Tazz

It appears you've already done it Tazz.

Looks great. Nice design. Can you share what you have done for other members to learn from?

Hey guys,

Sorry I should have been more clear! That site is a sample of the effect I am looking for...But I didn't do it! I would gladly share step by step instructions if I had it figured it out, but sadly...not!

Thanks

Ah. :O Well let's see if we can come up with something similar.

I am not sure why but using a trigger should bring the bar down from the top, but it doesn't. Also I think the trigger needs to be out of the screen which is problematic because every monitor is different.

I'm going to send a message to the Xara team and see if they have any suggestions.

Quote:

---

Originally Posted by gwpriester

I am not sure why but using a trigger should bring the bar down from the top, but it doesn't. Also I think the trigger needs to be out of the screen which is problematic because every monitor is different.

I'm going to send a message to the Xara team and see if they have any suggestions.

---

Thank you so much. I know, it's probably something quite easy, but that easy, I can't seem to find :confused:

Tazz

Nothing yet? Does anyone out there with those brilliant Xara minds have any idea how to do this...or replicate it some how? Thanks again.

I passed this request along to Xara. I don't think it can be done with the current animation capabilities. Maybe Siran or Acorn can find a script to do this?

Quote:

---

Originally Posted by gwpriester

I passed this request along to Xara. I don't think it can be done with the current animation capabilities. Maybe Siran or Acorn can find a script to do this?

---

Thank you so much. I'll see if they know any way to do it. I have been experimenting (could be dangerous) with different things to see if I can get it to work to no avail.

Tazz

I would probably move on to Plan B. :)

I have had a go and just about manage it with a Navbar that is Sticky at Top but initial position is down the page a bit. A Trigger object, half-way down the page.

A Reveal animation on the Trigger for the initial large icon. It hides a smaller icon that is Sticky at Top.

I used a Fade In of around a second but Xara fails to ease such animations out so you get a fast shutter effect on reversing.

Overall, the effect is not pleasant so i would use jQuery and CSS3 to do it properly.

Acorn

Quote:

---

Originally Posted by Acorn

I have had a go and just about manage it with a Navbar that is Sticky at Top but initial position is down the page a bit. A Trigger object, half-way down the page.

A Reveal animation on the Trigger for the initial large icon. It hides a smaller icon that is Sticky at Top.

I used a Fade In of around a second but Xara fails to ease such animations out so you get a fast shutter effect on reversing.

Overall, the effect is not pleasant so i would use jQuery and CSS3 to do it properly.

Acorn

---

Ahhhh, that's a shame. I sure wish there was an easier way. So as gwpriester stated, might want a Plan B.

Well thank you to both of you for offering a look into this.

Regards,
Tazz

Here's something I've been looking at. Javascript checks the 'y' value of the vertical scrollbar. Once it exceeds 200px the logo image changes to a smaller logo. As Acorn states the change is instant, but I'm sure instead of switching images it should be able to set a resize of the original image to act in a smoother transformation. Apologies about my code ;)

Quote:

---

Originally Posted by Egg Bramhill

Here's something I've been looking at. Javascript checks the 'y' value of the vertical scrollbar. Once it exceeds 200px the logo image changes to a smaller logo. As Acorn states the change is instant, but I'm sure instead of switching images it should be able to set a resize of the original image to act in a smoother transformation. Apologies about my code ;)

---

WOW, that's it...sure it's instant but...that's the idea. So. in theory, you could make the placeholder that triggers the change invisible, or make it any other graphic on the page? But it has to match the "y" value....
No need for apology, good heavens!!! As always you are awesome! Time to play around with it! Again thank you for all the help. I really like to make site's with a little bit bigger logo, centered. I also like the logo to stay at the top when you scroll, but obviously not that big and taking up space for content, so I love the effect where is decreases in size and moves out of the way, but remains visible...I ALWAYS like the things that are DANG near impossible to do haha

Tazz

Thanks for the comments Tazz. I'm sure Acorn and Siran can improve on this greatly, I'm no coder.

Here's my latest version. An ongoing project, firstly I need to hide the 'hidden' objects on page load.

Quote:

---

Originally Posted by Egg Bramhill

Thanks for the comments Tazz. I'm sure Acorn and Siran can improve on this greatly, I'm no coder.
Here's my latest version. An ongoing project, firstly I need to hide the 'hidden' objects on page load.

---

Egg, the code is useful.

I suggest changing the hiddent Class to one of varying the opacity:

> 200 - document.getElementById("tg-large").style.opacity = 0;<= 200 - document.getElementById("tg-large").style.opacity = (200 - scrollTop) / 200;

This softens the transition a little.

Acorn

P.S. var d is redundant.

Cheers Acorn. My coding is just a mash-up of code I grab from w3schools dot com. I'm really pleased when I get a positive result ;) Often I can't really follow the coding, hence the redundant var d, which I knew wasn't required. Often I get code to work, save the xar, then alter the code and everything goes tits-up. I'm never sure if Xara's undo feature undo's code amendments. I don't believe it does ???

I'm very visually oriented so much coding goes over my head if it's not got a demo, thus my leaning toward w3school dot com in which I can alter the code and see the results within their demos. I find stackoverflow dot com often has the answers to my questions but unfortunately I don't know how to implement the code supplied ;)

Quote:

---

Originally Posted by Egg Bramhill

Cheers Acorn. My coding is just a mash-up of code I grab from w3schools dot com. I'm really pleased when I get a positive result ;) Often I can't really follow the coding, hence the redundant var d, which I knew wasn't required. Often I get code to work, save the xar, then alter the code and everything goes tits-up. I'm never sure if Xara's undo feature undo's code amendments. I don't believe it does ???
I'm very visually oriented so much coding goes over my head if it's not got a demo, thus my leaning toward w3school dot com in which I can alter the code and see the results within their demos. I find stackoverflow dot com often has the answers to my questions but unfortunately I don't know how to implement the code supplied ;)

---

Egg, I would have overjoyed at having W3Schools as a resource when I was younger; JavaScript and CSS are such large subjects it is daunting to get started. The advantage I may have is I know, usually, when a thing can be done and sometimes even how. Knowing a thing is possible is 90% of the battle.

Always happy for you or ask if you get stuck.

Acorn

Thank you very much Acorn :)

Thanks again guys for your suggestions on this. I still haven't been able to get it to work...hmmmmm
It's a shame there isn't a method implemented within the software to make it happen. You have the stick at top option, now if it would just resize and relocate if needed. You see so many sites now days with the scrolling feature. The logo which usually starts out pretty big and bold, has to either scroll off the page entirely at the top, or can stick but at the same scale. In some cases the large "sticky" logo takes up too much space on the page from useful content space. I have so many sites I have created that I would LOVE to have this feature or ability. I will have to play with your code a little bit more. The first attempt was a total fail!
Tazz

Has anyone mastered this. It's been 4 years, and this is an effect that I've been trying to attain. The links to .XAR files in this thread are not working.